浅谈BFC的理解

在 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>

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

 

posted @ 2019-02-26 21:38  sugar_coffee  阅读(166)  评论(0编辑  收藏  举报