月度归档:2013年03月

从莫名的熟悉到明确的概念:CSS BFC(Block Formatting Context)

来源: http://www.w3cmm.com/other/css-bfcblock-formatting-context.html

BFC的定义

是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。

 

在创建了 Block Formatting Context 的元素中,其子元素会一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部,两个相邻的元素之间的垂直距离取决于 ‘margin’ 特性。在 Block Formatting Context 中相邻的块级元素的垂直边距会折叠(collapse)。

在 Block Formatting Context 中,每一个元素左外边与包含块的左边相接触(对于从右到左的格式化,右外边接触右边), 即使存在浮动也是如此(尽管一个元素的内容区域会由于浮动而压缩),除非这个元素也创建了一个新的 Block Formatting Context 。 Continue reading 从莫名的熟悉到明确的概念:CSS BFC(Block Formatting Context)