为什么要清除浮动以及怎么清除浮动？

不清除浮动的后果

HTML结构如下：

	<div class="topDiv">
		<div class="textDiv">文本信息</div>
		<div class="floatDiv">浮动元素</div>
	</div>
	<div class="bottomDiv">
		底部元素
	</div>	

CSS样式:

.topDiv{
	width: 500px;
	border: 2px solid black;
	/* 清除浮动 */
	/* overflow: hidden; */
}
.floatDiv{
	width: 100px;
	height: 100px;
	border: 2px dotted red;
	color: red;
	margin: 4px;
	float: left;
}
.textDiv{
	color: blue;
	border: 2px solid blue;
	/*.textDiv告诉浏览器，我左边不允许有浮动元素的存在，清除左边的浮动元素*/ 
	/* clear: left;  */
}
.bottomDiv{
	width: 500px;
	height: 100px;
	margin: 5px 0;
	border: 2px solid black;
}
/* .topDiv::after{
		display: block;
		height: 0;
		content: ".";
		clear: both;
	} */

此时的效果为：

本来的理想效果应该是浮动元素撑开上面的容器，然而并没有，这就是浮动的影响。

清除浮动的方法

1. 利用clear样式，指定某个元素的某边不能有浮动元素
2. 在父元素结束标签之前插入空的块级元素设置：clear:both
3. 利用伪元素清除浮动（::after,::before等）
4. 利用overflow清除浮动（设定除visible以外的任何有效值都可以，一般设置为hidden）

原理为触发了BFC（块格式化上下文，即块级元素的布局规范）