理解流特性与BFC块级格式上下文

一、流体特性与自适应布局

a.流体特性

对于block块级元素，如div,水平方向会自动填满外层容器，如果有margin-left/margin-right, padding-left/padding-right, border-left-width/border-right-width等，实际内容区域会响应变窄

 b.当块级子元素设置margin-left后，在父块级容器为flow_box的div元素中，填充满剩余部分

 利用左侧100像素的空白部分，岂不就可以实现两栏自适应效果

空白部分利用

float:left

position:absolute

 综上所述 利用块级元素的流体特性就可以实现多栏布局  举栗子 三列布局

二、元素BFC特性与自适应布局

1.BFC基本概念 BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”

BFC元素特性表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素。所以，避免margin穿透.

2.什么时候触发BFC

• float的值不为none。
• overflow的值为auto,scroll或hidden。
• display的值为table-cell, table-caption, inline-block中的任何一个。
• position的值不为relative和static。

overflow的值为auto,scroll或hidden。

 

BFC自适应布局模块间的间距

 担任BFC布局职责的属性 

1. overflow:auto/hidden IE7+
2. display:inline-block IE6/IE7
3. display:table-cell IE8+  

 

转载 CSS深入理解流体特性和BFC特性下多栏自适应布局