清除浮动

浮动是什么？

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

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>

css

.container{
        width: 300px;
        border: 1px solid #000;
        background-color: #aaa;
    }
  .left{
        width: 100px;
        height: 100px;
        background-color: #ffff00;
        float: left;

    }
    .right{
        width: 100px;
        height: 100px;
        background-color: #fa0000;
        float: right;
    }

看代码部分我们是要让 left 和 right 两个 div 在父容器 container 里面左右浮动,实际效果:子元素div并没有撑开父容器，这就是我们要清除浮动的原因。

第一种方法：
在浮动元素后面添加 class 为 clear 的 空 div 元素，给这个 div 设置样式
html:

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="clear"></div>
</div>

css

.clear{
      clear:both;
   }

这就是我们要的结果

第二种方法
给父容器添加 overflow:hidden 或者 auto 样式

  .container{
         width: 300px;
        border: 1px solid #000;
        background-color: #aaa;
        overflow:hidden;
        zoom:1;   /*IE6*/
    }

第三种方法：
给父容器添加 clearfix 的 class ，用 伪元素 clearfix：after 来设置样式，清除浮动
html

<div class="container clearfix">
    <div class="left"></div>
    <div class="right"></div>
</div>

css

 .clearfix{
        zoom: 1;                     /*IE6*/
    }
    .clearfix:after{
        content: ".";
        height: 0;
        clear: both;
        display: block;
        visibility: hidden;
    }

第四中方法
浮动元素后面右一个不为空的 div 元素，我们直接为这个元素添加 clear：both 样式
html

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="content">111</div>
</div>

css

.content{
      clear:both;
   }