Inside one BFC, top and bottom margins overlap同一个 BFC 里，上下外边距会重叠
overflow: hidden makes each box a BFC of its own, so the margins no longer overlapoverflow: hidden 让每个盒子自成一个 BFC，外边距不再重叠
Box model: with no padding or border, border-box is the same size as the default content-box盒模型：没有内边距和边框时，border-box 和默认的 content-box 一样大
A BFC wraps around the floats inside itBFC 会包住里面的浮动元素
A BFC does not overlap a float beside itBFC 不和旁边的浮动元素重叠
I am a left-floated element我是一个左浮动的元素
I don’t float, but overflow: hidden makes me a BFC, so I sit beside the float.
Without it, I start under the float, and my text wraps around it.我没有浮动，但 overflow: hidden 让我自成一个 BFC，所以排在浮动元素旁边。
去掉 overflow: hidden，我就会从浮动元素下面开始排，文字绕着它走。