html/css系列 BFC

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

第一种 BFC中的盒子对齐

<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决定

    <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 造成重叠

第二种BFC,因为浮动造成盒子对齐解决方法相隔的DIV换成P标签

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

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

猜你喜欢