html/css系列 BFC

最新推荐文章于 2024-08-09 20:45:54 发布

转载最新推荐文章于 2024-08-09 20:45:54 发布 · 55 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000015215728

本文介绍了使用BFC(Block Formatting Context)解决网页布局中常见的对齐、外边距折叠及浮动问题的方法。通过不同示例展示了如何利用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清除浮动