由清浮动想到的BFC

趁着上班这段时间有时间,翻了下精通CSS(虽然只有Head First 的1/4,这尼玛难道不是一个级别的。。。)…顿时感觉自己有迷茫了.今天抽空整理下BFC和如何清除浮动

什么是清除浮动

直接先上code。

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	#wrap{
		width:500px;
		margin:100px auto;
		border:1px solid black;
	}
	#wrap div:first-child{
		width:200px;
		height:200px;
		background:red;
		float:left;
	}
	#wrap div:nth-child(2){
		width:200px;
		height:200px;
		background:green;
		float:left;
	}
	</style>
</head>
<body>
	<div id="wrap">
		<div>测试1</div>
		<div>测试2</div>
	</div>
</body>

这个时候我们发现，使用浮动之后例子从

到

我认为高度塌陷的原因

这里有的书上解释是外部的div发生了高度塌陷。我感觉其实这样理解会更好一点。
因为父级的DIV是一个块级元素,宽度为100%,自动撑满整个屏幕，如果不设置宽度，宽度由内容撑开。
这里DIV的两个子元素使用float之后就脱离了文档流，不能就使得没有其他元素撑开这个父级的DIV，就使得高度为0.所以就不存在什么高度塌陷，因为他本身的高度就是0,原来是被子元素撑开了，现在就多算是回归自由身。

clearfix清除浮动

这里如果想要使得DIV中的元素撑开父级，一个常用的方法就是让父级添加一个after伪类,利用clearfix 来清除浮动，code在下面：

#wrap:after{
		content:"";
		display: block;
		clear:both;
	}

示意图

这个感觉没什么好说的，别跑题了- -，还是说说”BFC”

清除浮动的另一种方法——“BFC”

什么是BFC？

BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC布局的特性：

1. 内部的盒会在垂直方向一个接一个排列（可以看作BFC中有一个的常规流）；

2. 处于同一个BFC中的元素相互影响，可能会发生margin collapse(边距重叠)；

3. 每个元素的margin box的左边，与容器块border box的左边相接触
  (对于从左往右的格式化，否则相反)。即使存在浮动也是如此；

4. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然；

5. 计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算；

6. 浮动盒区域不叠加到BFC上

我理解就是”BFC”就是类似一个小宇宙的感觉，不管里面如何天翻地覆,都不会影响到外面的元素。

哪些元素会生成BFC

1.float属性不为none;
2.position属性为:absolute或者fixed;
3.overflow属性不为visible;
4.display属性为:inline-block;table-cell;
5.根元素html

边距重叠

举个栗子：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>

	#wrap{
		width:500px;
		height:500px;
		margin:100px auto;
		border:1px solid black;
	}
	#wrap div:first-child{
		width:100px;
		height:100px;
		background:red;
		margin-bottom:50px;

	}
	#wrap div:nth-child(2){
		width:100px;
		height:100px;
		background:green;
		margin-bottom:50px;

	}
	</style>
</head>
<body>
	<div id="wrap">
		<div>测试1</div>
		<div>测试2</div>
	</div>
</body>
</html>

修改后为
zzz