理解 CSS 中的 BFC

BFC 即 Block Formatting Contexts (块级格式化上下文)，它是页面中的一块渲染区域，而且有一套渲染规则，它决定了其子元素将如何定位，以及和其余元素的关系和相互做用。

具备 BFC 特性的元素能够看做是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，而且 BFC 具备普通容器所没有的一些特性。

通俗一点来说，能够把 BFC 理解为一个封闭的大箱子，箱子内部的元素不管如何翻江倒海，都不会影响到外部。

触发

只要元素知足下面任一条件便可触发 BFC ：

• body 根元素
• 浮动元素：float 除 none 之外的值
• 绝对定位元素：position (absolute、fixed)
• display 为 inline-block、table-cells、flex
• overflow 除了 visible 之外的值 (hidden、auto、scroll)

布局特性

具有 BFC 属性的元素，在页面布局上会有以下特性：

• 内部的块级 Box 会在垂直方向上挨个排列
• 属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
• 子元素的 margin 左边界，与父容器的 border 左边界是相接触的，即便设置了浮动依然如此
• 具有 BFC 的区域不会与浮动的 Box 发生重叠
• BFC 就是页面的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
• 计算 BFC 的高度时，浮动元素也参与计算

应用

利用上述的这些 BFC 特性，咱们能够总结出 BFC 具有以下的运用场景：

两栏或三栏自适应布局

以两栏为例，若是不给 main 容器添加 overflow: hidden 属性，main 容器会延展到浮动区域，使其成为 BFC 后，即可使其实现宽度自适应。

<div>
    <div class="float"></div>
    <div class="main"></div>
</div>

<style> .float{ width: 200px; height: 500px; background: skyblue; float: left; } .main{ background: pink; height: 600px; overflow: hidden; /* 使其成为 BFC */ } </style>

复制代码

完整代码-在线预览

这个方法也可运用于解决一个元素被浮动元素覆盖的问题，请戳-完整代码-在线预览

解决父容器高度塌陷

咱们知道浮动元素会脱离文档流，当父容器的全部子元素都设置浮动后，会致使父容器出现高度“塌陷”的问题，若是让父容器设置为 BFC ，那么它就会包裹浮动元素，从而解决高度“塌陷”：

<div class="wrap">
    <div class="box"></div>
    <div class="box"></div>
</div>

<style> .wrap{ border: 1px solid red; overflow: hidden; /* 使其成为 BFC */ } .box{ width: 50px; height: 50px; background: skyblue; float: left; } </style>

复制代码

完整代码-在线预览

解决垂直方向 margin 重叠

从上述 BFC 的特性咱们知道子元素垂直方向的距离由 margin 决定，属于同一个 BFC 的两个相邻子元素的 margin 会发生重叠，解决办法就是使这两个相邻的子元素分别属于不一样的 BFC：

<div class="wrap">
    <div class="box">1</div>
    <div class="inner">
        <div class="box">2</div>
    </div>
</div>

<style> .box { width: 50px; height:50px; background: skyblue; margin: 50px; } .inner{ overflow: hidden; } </style>

复制代码

这里咱们给其中一个 Box 外面包一个 div（即 inner 容器），而后经过触发外面这个 div 的 BFC ，就能够阻止这两个 Box 的 margin 重叠。

完整代码-在线预览