html/css系列 BFC

时间 2019-12-05

标签 html css 系列 bfc 栏目 HTML 繁體版

原文原文链接

本文详情:https://www.cnblogs.com/chen-...html

第一种 BFC中的盒子对齐spa

<div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </div>

div {
                height: 20px;
        }
            
        .container {
            position: absolute;  /* 建立一个BFC环境*/
            height: auto;
            background-color: #eee;
        }
        
        .box1 {
            width: 400px;
            background-color: red;
        }
        
        .box2 {
            width: 300px;
            background-color: green;
        }
        
        .box3 {
            width: 100px;
            background-color: yellow;
            float: left;
        }
        
        .box4 {
            width: 200px;
            height: 30px;
            background-color: purple;
        }

第二种外边距折叠垂直方向上的距离由margin决定code

<div class="container">
        <div class="box"></div>
        <div class="box"></div>
    </div>

.container {
            overflow: hidden;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        
        .box1 {
            height: 20px;
            margin: 10px 0;
            background-color: green;
        }
        
        .box2 {
            height: 20px;
            margin: 20px 0;
            background-color: green;
        }

上下DIV同时margin 形成重叠htm

第二种BFC,由于浮动形成盒子对齐解决方法相隔的DIV换成P标签blog

第三种DBC 左边浮动右边自适应ip

第四种DFC 文字环绕解决方法verflow:hidden清除浮动get