BFC块级格式上下文
Posted 柒叶
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了BFC块级格式上下文相关的知识，希望对你有一定的参考价值。
BFC块级格式上下文，独立的一个渲染区域
1、同一个BFC的两个相邻盒子间的margin会重叠（垂直方向）；
2、BFC内部的盒子在垂直方向上会一个接一个的放置；
3、每个子元素的左外边距与包含块的左边界相接触；
4、计算BFC的高度时，浮动子元素也参与计算；
5、BFC内部的子元素不会受到外面元素的影响；
6、BFC的区域不会与float的元素区域重叠；
触发BFC条件：
float：不为none；
overflow的值不为visible；
display：inline－block，table－cell，table－caption；
position：不为relative 和 static
哪些元素会产生BFC
- 根元素
- float属性不为none
- position为absolute或fixed
- display为inline-block, table-cell, table-caption, flex, inline-flex
- overflow不为visible
如果一个浮动元素后面紧跟一个非浮动的元素，那么就会有一个覆盖的对象，这时可对后面非浮动元素设置overflow：hidden触发BFC，或者设置padding－left：浮动元素的宽度
以上是关于BFC块级格式上下文的主要内容，如果未能解决你的问题，请参考以下文章