hasLayout与Blockformattingcontexts的学习(下)_html/css_W

BFC布局规则 ：

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算。
在CSS3中，对这个概念做了改动：http://HdhCmsTestw3.org/TR/css3-box/#block-level0
在CSS3中，将BFC 叫做 flow root。

简单示例：
1.自适应两栏布局
代码如下：

	 	 	 		 		 BFC 		 			body{				width:350px;				position:relative;			}			div.sidebar{				float:left;				width:100px;				height:200px;				background-color:#9deaf1;			}			div.main{				height:300px;				background-color:#5dc2f6;			}		 	 	 		


      
查看更多关于hasLayout与Blockformattingcontexts的学习(下)_html/css_W的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did108937