到底什么是BFC呢？自学笔记

常见的BFC有三种情况

1.内层float 定高定宽 外层无float 定宽无定高 会发生外部塌陷 无法撑开内部 。
解决方法（清除浮动的影响）：外部元素设置 overFlow：hidden。

2.上下两个盒子margin会发生重叠。
解决方法（防止外边距重叠）：将第二个盒子使用div包裹起来 并且设置 overflow：hidden。

总结

因为BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。
同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。