浮动到底是什么？
- 浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。
浮动有哪些特征？
浮动会脱离文档
-
浮动不会影响普通元素的布局，同时也存在盖住普通元素的风险。
浮动会脱离文档流
浮动可以内联排列
-
浮动的元素可以设置宽高并且可以内联排列，是介于inline和block之间的存在。如果每个元素的高度不一致，会出现“卡住”的情况。
浮动可以内联排列
浮动会导致父元素高度坍塌
.box-wrapper {
border: 5px solid red;
}
.box-wrapper .box {
float: left;
width: 100px;
height: 100px;
margin: 20px;
background-color: green;
}
<div class="box-wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
结果如下，浮动元素脱离了文档流，并不占据文档流的位置，自然父元素也就不能被撑开，所以没了高度。
父元素高度坍塌
如何清除浮动？
清除浮动实际上是“消除浮动影响”；而不是“浮动”本身。
1.clear清除浮动（推荐使用）
clear属性不允许被清除浮动的元素的左边/右边挨着浮动元素，底层原理是在被清除浮动的元素上边或者下边添加足够的清除空间。
接着上面的例子，我们简单修改一下HTML代码，如下
<div class="box-wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div style="clear:both;"></div>
</div>
clear清除浮动
不要在浮动元素上清除浮动
如果我们给第三个元素加上clear:both，结果会怎样？<div class="box-wrapper"> <div class="box"></div> <div class="box"></div> <div class="box" style="clear:both;"></div> </div>不要在浮动元素上清除浮动
给第三个元素加上clear:both之后，第三个元素的左右都没有挨着浮动元素，但是为什么高度还是坍塌了呢？机智的你可能发现了，由于第三个元素是浮动元素，脱离了文档流，就算给第三个元素上下加了清除空间，也是没有任何意义的。
2.对父级设置适合CSS高度
对父级设置适合高度样式清除浮动，这里对“.box-wrapper”设置一定高度即可，一般设置高度需要能确定内容高度才能设置。
3.父级div添加 overflow:hidden样式
overflow:hidden属性相当于是让父级紧贴内容，这样即可紧贴其对象内内容（包括使用float的div盒子），从而实现了清除浮动。
参考链接
http://www.jianshu.com/p/cd4cde49f0d4
http://www.divcss5.com/jiqiao/j406.shtml
网友评论