bfc总结-爱代码爱编程
什么是bfc
BFC直译起来就是块级格式化上下文。它相当于一块独立的渲染区域,BFC看成是元素的一种属性, 当元素拥有了BFC属性后,这个元素就可以看做成隔离了的独立容器。容器内的元素不会影响容器外的元素。
BFC的规则
BFC就是页面中的一个隔离的独立容器,容器里的标签不会影响到外部标签
BFC就是一个块级元素,块级元素会在垂直方向一个接一个的排列
垂直方向的距离由margin决定, 属于同一个BFC的两个相邻的标签外边距会发生重叠
计算BFC的高度时,浮动元素也参与计算
如何触发bfc
- overflow: hidden
- display: flex
- display: table-cell
- display: inline-block
- position: fixed
- position: absolute
bfc的作用
- 解决子元素使用Float脱离文档流,父盒子高度塌陷问题
bfc有一个特性,计算BFC的高度时,浮动元素也参与计算,因此,当一个盒子的子元素浮动时,可以给父盒子设置属性,比如说,设置display: inline-block,来触发bfc。
- 解决Margin边距重叠问题
根据属于同一个BFC的两个相邻盒子垂直方向的margin会发生重叠的性质,可以给其中一个盒子再包裹一个盒子父元素,并触发其BFC功能(例如添加overflow:hidden;)这样垂直方向的两个盒子就不在同一个BFC中了,因此也不会发生垂直外边距合并的问题了。