常见的BFC有三种情况
1.内层float 定高定宽 外层无float 定宽无定高 会发生外部塌陷 无法撑开内部 。
解决方法(清除浮动的影响):外部元素设置 overFlow:hidden。
2.上下两个盒子margin会发生重叠。
解决方法(防止外边距重叠):将第二个盒子使用div包裹起来 并且设置 overflow:hidden。
总结
因为BFC内部的元素和外部的元素绝对不会互相影响,因此, 当BFC外部存在浮动时,它不应该影响BFC内部Box的布局,BFC会通过变窄,而不与浮动有重叠。
同样的,当BFC内部有浮动时,为了不影响外部元素的布局,BFC计算高度时会包括浮动的高度。