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 就是有著新行為的元素
會被以下的屬性所觸發
所以...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
翻成白話文
- 讓block不去包覆float元素
- 讓block變得更窄
DEMO
references
- http://kayosite.com/block-formatting-contexts-in-detail.htmlBullet Two
- Bullet Three