概念:
BFC名为 "块级格式化上下文",简单来说就是,BFC
是一个完全独立的空间(布局环境),让空间里的子元素不会影响到外面的布局。
触发BFC的常见设置:
- overflow: hidden
- display: inline-block
- position: absolute
- position: fixed
- display: table-cell
- display: flex
BFC的规则:
BFC
就是一个块级元素,块级元素会在垂直方向一个接一个的排列BFC
就是页面中的一个隔离的独立容器,容器里的标签不会影响到外部标签- 垂直方向的距离由margin决定, 属于同一个
BFC
的两个相邻的标签外边距会发生重叠 - 计算
BFC
的高度时,浮动元素也参与计算
BFC解决的问题:
1.Float设置元素浮动导致父盒子高度塌陷:
可以通过让父元素触发BFC使父元素依然可以自动计算高度。
2.Margin外边距重叠:
属于同一个BFC
的两个相邻的标签外边距也会发生重叠。
可以使俩个发生margin重叠的元素中的其中一个触发BFC,以解决俩个元素外边距塌陷的问题。
3.清除浮动:
给元素设置浮动后,该元素拖标,会影响其后面的元素布局。
可以使浮动的元素触发BFC,清除掉浮动对布局的影响。