一般有以下两种情况需要清除浮动：
情况A，你有一个父div，它的高度你没有设置，或者是auto，父元素如果只包含没有浮动的元素，那么它的高度会被子元素的宽高撑开，如果其子元素都是向左或者向右浮动的元素，那么父元素的高度则不会被撑开，因为浮动元素不占据空间。
情况B，我们知道，浮动会让元素脱离文档流，如果一个元素上面有一个向左浮动的元素，它的宽度没有达到100%，那么如果下面这个元素（文档流中的元素），如果宽度小于上个浮动的元素占位剩余的宽度，那么文档流中的元素的行宽被缩短，使得文档流中的元素围绕住浮动的元素。如果你不想这样，那么需要清除浮动了。
清除浮动实际上并没有一句clear:both这么简单，一般我们称清除浮动代表去除浮动带来的负面影响，也有叫闭合浮动的。下面来捋一捋清除浮动的那些事儿。
下面是没有清除浮动的场景：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮动</title>
</head>
<body>
<div>
<h3>溢出的情形</h3>
<div class="fa">
<h4>blue是父元素</h4>
<div class="chlid-fl-ele">
这是浮动子元素
</div>
<p>
这是子元素段落这是子元素段落这是子元素段落这是子元素段落这是子元素段落这是子元素段落这是子元素段落这是子元素段落这是子元素段落这是子元素段落这是子元素段落这是子元素段落这是子元素段落这是子元素段落这是子元素段落这是子元素段落这是子元素段落这是子元素段落这是子元素段落这是子元素段落这是子元素段落这是子元素段落这是子元素段落这是子元素段落这是子元素段落这是子元素段落这是子元素段落这是子元素段落这是子元素段落这是子元素段落这是子元素段落
</p>
</div>
</div>
</body>
<style type="text/css">
.fa {
width: 100%;
background-color: blue;
}
.chlid-fl-ele {
width: 200px;
height: 200px;
float: left;
background-color: #333;
}
.fa p {
color: #333;
}
</style>
</html>效果如下：
第一种清除浮动的方法是在浮动元素的后面的元素上加上clear:both 清除浮动
第二种清除浮动的方法是在浮动元素后面加个没有意义的元素：在这个元素上加上clear:both;
下面也是一种方式 就是利用br元素的clear属性，
第三种清除浮动的方法 overflow:hidden
在父元素上加overflow:hidden 可以避免浮动子元素撑不开父元素的问题，但是实际上这并没有清除子段落的浮动，也就是说 段落的仍然是围绕浮动元素的。这种清除浮动的方式并不是特别明了，有的时候overflow:hidden会限制父元素的功能，所以要注意这种情况的副作用。
第四种清除浮动的方法 让父元素也浮动起来
这种方法的效果跟上个方法带来的效果相同，同时也要注意副作用
总的来说，清除浮动就这么几种，关键是看应用的场景来选择较为合适的方式，平常做布局时要注意一些浮动带来的负面影响。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
