解决边距重叠问题/清除浮动
Block Formatting Contexts,属于普通流
(1)基本概念:块级格式化上下文(并列ifc为内联格式化上下文)
(2)原理(渲染规则):
①在同一个bfc,相邻box垂直方向的边距会发生重叠
②bfc的区域不会和浮动元素的box重叠
③计算bfc高度时,浮动元素参与计算,清除内部浮动,使盒子重新具有高度。
④bfc页面是一个独立的元素,外面和里面的元素互不影响(3)如何创建bfc
①overflow:hidden;(overflow不为visible)
②float不为none;
③position不为static或者relative
④display为inline-block, table-cell, table-caption, flex, inline-flex(4)bfc使用场景
①自适应的两栏布局,BFC 可以阻止元素被浮动元素覆盖,符合(2)第2条
②清除内部浮动,当子元素均浮动时,其无法撑开父元素,这是可以让父元素生成BFC,符合(2)第3条
③防止margin重叠,在发生margin的元素外包裹一个bfc父元素,符合(2)第1条
④以上的几个例子符合(2)第4条:
BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
因为BFC内部的元素和外部的元素绝对不会互相影响,因此:
- 当BFC外部存在浮动时,它不应该影响BFC内部Box的布局,BFC会通过变窄,而不与浮动有重叠。
- 同样的,当BFC内部有浮动时,为了不影响外部元素的布局,BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。