浅谈BFC的理解

时间：2022-04-15 10:43:40

在 web 页面布局中，有三种控制元素版式布局的模型：

  • 普通流 (Flow)

元素在 HTML 中按照先后位置从上至下的流式排列方式布局。

  • 浮动流（Float）

　　　　在浮动布局中，元素首先按照普通流的位置呈现，然后根据浮动的方向向左边或右边偏移。

  • 定位流（Position）

　　　　在绝对定位布局中，元素会整体脱离普通流，而元素的具体位置由绝对定位的坐标决定。

BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于普通流。具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素。

只要元素满足以下任一条件即可触发 BFC ：

　　1. float 元素：除 none 的值，float: left | right;

　　2. 绝对定位元素：position: absolute | fixed;

　　3. display:  inline-block | table-cells | table-caption | inline-flex | flex;

　　4. overflow 除了 visible 的值，overflow: hidden | scroll | auto;

BFC 的特性：

　　1. 同一个 BFC 下外边距折叠

　　　　例如：上下两个盒子 div，一个设置了 margin-bottom，一个设置了 margin-top，两个 div 的边距就会重叠而取其中最大的边距为两个 div 之间的距离。如果要避免这种外边距折叠，可以新建一个 BFC 容器，将两个 div 放在不同的 BFC 容器中。

<div> DIV1 </div>

<div> DIV2 </div>

<!-- 可以更改成如下 -->

<div>

    <p> DIV1 </p>

</div>

<div> DIV2 </div>

　　2. 可以清除浮动

<div>

    <div style="width: 100px;height: 100px;float: left;"></div>

</div>

<!-- 触发容器的BFC后 -->

<div style="overflow: hidden">

    <div style="width: 100px;height: 100px;float: left;"></div>

</div>

　　3. BFC 可以阻止元素被浮动元素覆盖

<div style="width: 100px;height: 100px;float: left;">我是一个左浮动的元素</div>

<div style="height: 200px;">我是一个没有设置浮动, 也没有触发 BFC 元素</div>

<!-- 触发 BFC 后 -->

<div style="width: 100px;height: 100px;float: left;">我是一个左浮动的元素</div>

<div style="height: 200px; overflow: hidden;">我是一个没有设置浮动, 也没有触发 BFC 元素</div>

这个方法可以用来实现两列自适应布局，左边的宽度固定，右边自适应宽度。

相关文章