Block Formatting Context

1st September 2015

Sheng Wang - RD Frontend Team

Text

Block formatting contexts?

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

W3C CSS2

翻成白話文

float: right / left
overflow: hidden / auto/ scroll
display: table-cell 或其他與table有關的屬性/ inline-block
position: absolute / fixed

Block formatting context 就是有著新行為的元素

會被以下的屬性所觸發

DEMO

所以...BFC可以幹嘛?

阻止外邊距合併

包含浮動的元素
改變與浮動元素互動方式

改變與浮動元素互動方式

The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself.

W3C CSS2