likes
comments
collection
share

清除浮动图文解析：BFC的详细概念与触发原理

作者站长头像
站长
· 阅读数 61

BFC是指"块级格式化上下文"（Block Formatting Context）。它是CSS中的一个重要概念，用于描述在页面布局时，块级元素如何相互影响和定位的一种规范机制，常用于解决布局问题，如清除浮动、防止外边距合并等。

浮动布局的场景模拟：

当你在页面上放两组图片时，它是这样显示的：

   <style>
        ul{
            font-size:0;
        }
        /* 图片宽度 */
        img{
            width: 300px;
        }
  </style>

<body>
    <ul>
        <li class="item"><img src="https://img1.baidu.com/it/u=4068347985,765153296&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=370" alt=""></li>
        <li class="item"><img src="https://img1.baidu.com/it/u=152517855,1336329057&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500" alt=""></li>
    </ul>
</body>
清除浮动图文解析：BFC的详细概念与触发原理

由于两个li都为块级元素，如果想让它们都集中在一行，那么大家最先想到的方法肯定是给ul中的每一个子项li都添加上浮动属性，于是：

  <style>
        ul{
            font-size:0;
        }
        /* 图片宽度 */
        img{
            width: 300px;
        }
        .item{
            float: left;
        }
  </style>
清除浮动图文解析：BFC的详细概念与触发原理

就在这时，你突然想给这两张图片添加一段文本。

按照正常流程，在ul之下添加一个名为content的div来容纳这段文本:

<body>
    <ul>
        <li class="item"><img src="https://img1.baidu.com/it/u=4068347985,765153296&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=370" alt=""></li>
        <li class="item"><img src="https://img1.baidu.com/it/u=152517855,1336329057&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500" alt=""></li>
    </ul>
    <div class="content">你有没有听见孩子们的悲鸣？你有没有感受到城市在分崩离析？你不曾注意阴谋得逞者在狞笑！你是否想过.....朋友不在是朋友，家园不再是家园</div>
</body>
清除浮动图文解析：BFC的详细概念与触发原理

但就是在这个时候，由于容器ul被赋予的浮动属性，塌陷了我们预期出现在图片底部的文本。

各种清除浮动方法：

这个时候有许多方法可以达到我们的目的，包括：

  1. 设置父元素的高度
  2. 在父元素结束之前添加一个空元素，并摄制 clear: both；
  3. 借助伪元素 ：：after 清除浮动
  4. 给后面受影响的元素设置 clear： both；
  5. 把父元素设置成 BFC 容器

上四点有的只是达到和清除浮动一样的效果，不能做到尽善尽美，有的甚至会产生过多冗余的代码，逐渐形成屎山，因此一般情况下不推荐使用。

BFC的应用原理：

可以看出此时ul容器中的高度为零，这是因为正常普通的容器不会把浮动元素的高度计算在内，也可以说成是不会把脱离文档流的元素高度计算在内（浮动元素脱离文档流），这就是文本塌陷的原因。

清除浮动图文解析：BFC的详细概念与触发原理

但如果我们将ul设置成BFC容器：在ul内添加上overflow:hidden这段代码

   <style>
        ul{
            font-size:0;
            overflow:hidden;
        }
        /* 图片宽度 */
        img{
            width: 300px;
        }
        .item{
            float: left;
        }
  </style>

BFC将浮动元素的高度计算在内，我们所期望的文本回到了它该在的位置，至此，大功告成

清除浮动图文解析：BFC的详细概念与触发原理

BFC的布局规则

  1. 内部的Box会在垂直方向，一个接一个地放置
  2. BFC容器内部和外部的容器相互隔离，互不影响 -- 解决margin重叠问题
  3. BFC容器内，在垂直方向上相邻元素的margin会重叠
  4. BFC容器在计算高度时，浮动元素也参与计算 --- 清除浮动

补充：触发BFC

当然能触发BFC容器的代码不单单只有overflow:hidden,以下是其它能将容器设置为BFC容器的代码：

  1. overflow：hidden || auto || overlay || scroll
  2. flaot: left || right
  3. position: absolute || fixed
  4. display: inline-block
  5. display: table-cell || table-xxx
  6. display： flex || inline-flex
转载自:https://juejin.cn/post/7372757076937064483
评论
请登录