BFC

最新推荐文章于 2017-03-17 14:13:07 发布

zd10101501

最新推荐文章于 2017-03-17 14:13:07 发布

阅读量1.3k

点赞数

分类专栏： css 文章标签： BFC

本文链接：https://blog.csdn.net/danzhang1010/article/details/38515777

版权

css 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

这个东东搞懂了的话，感觉布局的原理就会理解起来很容易。关键的参考资料，是css规范http://www.w3.org/TR/CSS21/visuren.html#block-formatting。在上一篇文章中简单的介绍了一下，那个地方主要使用BFC来清除浮动，当然明白BFC的特性是很重要的啦，所以在这儿再写一点儿东西，写点代码，看看效果.

特性一：
BFC中的box的左边界会靠着包含框的左边框，即使其中已经包含float元素。

html代码：

<style>
	body{
		width:1000px;
		margin:0 auto;
		border:4px solid black;

	}
	div{
		margin:10px;
	}
#div1{
	float:left;
	width:500px;
	height: 200px;
	border:4px solid blue;
	background-color: pink;
}
#div2{
	
	height: 400px;
	border:4px solid red;
	background-color: yellow;
	/*overflow: hidden;*//*通过设置overflow为hidden，可以使该div成为一个BFC，BFC的特性之一就是不会与其他浮动元素重叠*/
}
	</style>

</head>
<body>
	<div id="div1">
		I am a float:left div
	</div>
	<div id="div2">
		I am a normal div 。
		Block Formatting Context （块格式化上下文）是 W3C CSS 2.1 规范中的一个概念，在CSS3中被修改为flow root。格式化则表明了在这个环境中，元素处于此环境中应当被初始化，即元素在此环境中应当如何布局等。元素如果创建了BFC，那么BFC决定了如何对其内容进行定位，以及它与其他元素的关系和相互作用。创建了BFC的元素会按照如下的方式对其子元素进行排列：<br> 
 元素的子元素会一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部，两个
相邻的元素之间的垂直距离取决于 'margin' 特性。在 BFC中相邻的块级元素的垂直边距会折叠（collapse）。 <br>
 元素的子元素中，每一个子元素左外边与包含块的左边相接触（对于从右到左的格式化，
右外边接触右边）， 即使存在浮动也是如此（尽管一个子元素的内容区域会由于浮动而压缩），除非这个子元素也创建了一个新的BFC，如它自身也是一个浮动。
	</div>
</body>

效果：

此处黄色背景的div靠着body的边框（留白是margin），如果去掉div2中的注释，那么div2就是一个BFC，

BFC的特性之二：BFC不会和float元素重叠，可以利用该特性实现多栏布局

所以去掉朱时候，div2就不会和div1重叠，效果如图：

特性三：
同处于一个BFC的块元素的上下margin会发生折叠

<style>
div{
	border:1px solid red;
	margin:50px;
}
	</style>

</head>
<body>
	<div id="p1">
		2 什么情况下会创建BFC  
CSS 规范说明了在下列这些情况下会创建新的 block formatting context：
		<ul>
			
			<li>浮动元素（float: left | right）；</li>
			
			<li>绝对定位元素（position: absolute | fixed）；</li>
			
			<li>行内块元素（display: inline-block）；</li>
			 
			<li>表格的单元格（display: table-cells，TD、TH）；</li>
			 
			<li>表格的标题（display: table-captions，CAPTION）；</li>
			
			<li>'overflow' 特性不为 visible 的元素（除非该值已经传播到viewport?）；</li>
			 

			<li>表格元素创建的 "匿名框"  </li>
		</ul>

		</div>
	<div id="p2">