小张和BFC

BFC作用

• 清除浮动：BFC会包含创建它的元素内部的所有内容（包含浮动元素）
• 外边距折叠：解决同一BFC容器的相邻元素间的外边距折叠问题
• 左图右文布局：利用浮动元素产生BFC以及BFC之间不会相互覆盖实现左图右文布局

形成BFC条件

• 浮动元素，float除none以外的值
• 绝对定位元素，position(absolute,fixed);
• display的值是以下一个：inline-blocks，table-cells，table-captions；
• overflow除了visible以外的值（hidden,auto,scroll）

BFC原理

普通流

在普通流中，元素按在HTML中的先后顺序自上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认普通流定位。

浮动

在浮动定位中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能向左边或者右边偏移

绝对定位

在绝对定位中，元素会整体脱离文档流，因为绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定

BFC产生作用的原因

BFC会产生一个独立的容器，该容器内部的元素不会再布局上影响到外部的元素，在外部的普通流看来他跟其他普通流元素无差别，文档最终会按照上面的普通流计算布局