BFC

标签：

BFC是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。 在创建了 Block Formatting Context 的元素中，其子元素会一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻的元素之间的垂直距离取决于 ‘margin’ 特性。在 Block Formatting Context 中相邻的块级元素的垂直边距会折叠（collapse）。

在 Block Formatting Context 中，每一个元素左外边与包含块的左边相接触（对于从右到左的格式化，右外边接触右边）， 即使存在浮动也是如此（尽管一个元素的内容区域会由于浮动而压缩），除非这个元素也创建了一个新的 Block Formatting Context 。

怎样才会形成BFC？

1.float的值不为none。

2.overflow的值不为visible。

3.display的值为table-cell, table-caption, inline-block中的任何一个。

4.position的值不为relative和static。

BFC的作用?

1.不和浮动元素重叠

2.清除元素内部浮动

3.嵌套元素Margin边距折叠问题的解决

layout就是指网页的布局设计，其实很多东西都会涉及到布局的设计问题，譬如在制作PPT的时候使用的模板或海报的布局，包括标题，图片，文本框的间架结构以及排列问题。在设计网页时可以通过一些商业软件或特定的网页设计语言来实现LAYOUT设计

BFC

标签：

原文地址：http://www.cnblogs.com/yan940623/p/4311814.html