CSS之清除浮动

1. 浮动：

元素脱离文档流，向指定方向移动，并且不占父元素的高度，如果父元素不设置高度，则会变成零，就是高度塌陷

2. 清除浮动的方法

html代码如下：

<div id="con"><!-- 父元素 -->
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
</div>

css代码：

<style type="text/css">
	#con{
	/*父元素没有设置高度*/
	width: 80%;
	margin: 10px 10%;
	background: gray;
	}
	.box{
	width: 18%;
	height: 100px;
	margin: 5px 1%;
	background: red;
	float: left;
	}
	</style>

2.1 给父元素添加浮动

这样父元素不会发生高度塌陷

不足：若父元素外面还有嵌套父元素，操作起来会很麻烦

2.2 给父元素添加高度

如果浮动元素的高度和个数确定了，那可以直接设置父元素高度；

不足：浮动元素个数和高度需要调整时，又需要设置父元素高度

2.3 在父元素里添加空div

给空div添加样式

clear='both';

2.4 给父元素的样式添加overflo属性

#con{
	/*父元素没有设置高度*/
	width: 80%;
	margin: 10px 10%;
	background: gray;
	/*用hidden或者用auto*/
	overflow:hidden;
	}

(但是原理看不懂，笑哭.jpg )

2.5 给父元素添加伪元素

#con:after{
	content: '';
	/*以块级元素撑满剩余空间*/
	display: block;
	clear: both;
	}