BFC到底是啥？？先来看两个相关的概念：
Box
Box 是 CSS 布局的对象和基本单位，一个⻚面是由很多个 Box 组成的，这个 Box 就是我们所说的盒模型。
Formatting context
块级上下文格式化，它是⻚面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
BFC
块格式化上下文(Block Formatting Context)是 Web页面的可视化 CSS 渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。
通俗来讲:BFC 是一个独立的布局环境，可以理解为一个容器，在这 个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。如果一个元素符合触发 BFC 的条件，则 BFC 中的元素布局不受外部影响。
创建 BFC 的条件
(1) 根元素:body;
(2) 元素设置浮动:float 除 none 以外的值;
(3) 元素设置绝对定位:position (absolute、fixed);
(4) display 值为:inline-block、table-cell、table-caption、flex 等;
(5) overflow 值为:hidden、auto、scroll;
BFC 的特点
(1) 垂直方向上，自上而下排列，和文档流的排列方式一致。
(2) 在 BFC 中上下相邻的两个容器的 margin 会重叠
(3) 计算 BFC 的高度时，需要计算浮动元素的高度
(4) BFC 区域不会与浮动的容器发生重叠
(5) BFC 是独立的容器，容器内部元素不会影响外部元素 每个元素的左 margin 值和容器的左 border 相接触
BFC 的作用
(1) 解决 margin 的重叠问题:由于 BFC 是一个独立的区域，内部的元素 和外部的元素互不影响，将两个元素变为两个 BFC，就解决了 margin 重叠的问题。
(2) 解决高度塌陷的问题:在对子元素设置浮动后，父元素会发生高度塌 陷，也就是父元素的高度变为 0。解决这个问题，只需要把父元素变 成一个 BFC。常用的办法是给父元素设置 overflow:hidden。
网友评论