CSS layout: BFC, Grid and centering

The guide measures the boxes for you and switches their rules on and off. You can also inspect a box in your browser’s developer tools.

同一个 BFC 里，上下外边距会重叠

overflow: hidden 让每个盒子自成一个 BFC，外边距不再重叠

盒模型：没有内边距和边框时，border-box 和默认的 content-box 一样大

BFC 会包住里面的浮动元素

BFC 不和旁边的浮动元素重叠

我是一个左浮动的元素

我没有浮动，但 overflow: hidden 让我自成一个 BFC，所以排在浮动元素旁边。去掉 overflow: hidden，我就会从浮动元素下面开始排，文字绕着它走。

Explicit formatting context: flow-root

Contains the float without clipping.