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:浮动元素的宽度