Block Formatting Contexts Demo

BFC 会阻止边距折叠

我是一个段落，在我以及我的父元素上同时添加了上下的外边距

我是一个段落，在我以及我的父元素上同时添加了上下的外边距

我是一个段落，在我以及我的父元素上同时添加了上下的外边距

BFC 可以包含浮动的元素

我设置了左浮动 float: left, 但是我的父元素没有触发 BFC

我设置了左浮动 float: left, 而且我的父元素触发了 BFC

BFC 可以阻止元素覆盖浮动元素

块级元素会被它的兄弟浮动元素覆盖

我设置了 float: left; width: 200px;

我没有设置浮动，也没有触发 BFC ，width: 300px; border: 1px solid #9a9a9a;

触发了 BFC 的元素不会被它的兄弟浮动元素覆盖

我设置了 float: left; width: 200px;

我没有设置浮动，width: 300px; border: 1px solid #9a9a9a; overflow: hidden; *zoom: 1;

子元素宽度均小于父元素，但父元素宽度不足以容纳一行中所有子元素时，非浮动子元素会下沉

我设置了 float: left; width: 200px;

我没有设置浮动，宽度为 600px，其他 CSS 属性 border: 1px solid #9a9a9a; overflow: hidden; *zoom: 1;