CSS中的浮动和清除浮动

浮动到底是什么？

• 浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。

浮动有哪些特征？

浮动会脱离文档

• 浮动不会影响普通元素的布局，同时也存在盖住普通元素的风险。

  
  浮动会脱离文档流

浮动可以内联排列

• 浮动的元素可以设置宽高并且可以内联排列，是介于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