关于BFC
2017-08-12 本文已影响20人
晓风残月1994
关于BFC
BFC 定义:
BFC(Block formatting context)块级格式化上下文：
比如设置了float、absolute定位、fixed定位的元素，table-cells 、inline-blocks、table-captions。但又不是简单的display:block。
或者是block，但又添加了overflow: auto, hidden,scroll。
以上具有这些属性的元素时，都会建立新的块级格式化上下文。
处在同一块级格式化上下文中的元素，比如h1、p会遵从一些规则，比如：
- 元素会从上到下排列
- 另外元素和元素之间，如果有margin，会产生合并，比如一个下margin和下一个元素的上margin合并而一旦使用了开头所属的元素，则会建立新的块级格式化上下文（BFC）， 不再受上一个容器的影响，有了自己的那套格式化规则，有自己的浮动。
BFC特性和作用：
1. BFC会阻止垂直外边距合并:
只有同在一个BFC时，两个元素才会有可能发生垂直方向上的margin的重叠，这种元素包括相邻元素，嵌套元素，只要他们之间没有阻挡（例如border、非空内容，padding等），就会发生margin重叠。
因此只要让它们不再同一个BFC就行了。对相邻元素意义不大，嵌套元素很有必要建立新的BFC。
2. BFC不会重叠浮动元素:
可用来清除浮动.
3. BFC可以包裹住浮动元素:
父容器触发了BFC，便可以包含子元素的浮动。（浮动也能触发BFC）
总结：用BFC的特性清除浮动，总归都会有副作用，相比将来说 overflow副作用最小，但是在构建二级子菜单也会有影响，所以需要权衡使用。
