清除浮动的3种方式

1. 使用带clear属性的空元素

<h2>给浮动元素后面的元素添加clear属性</h2>
<div class="box">
    <p class="textFloat">text</p>
    <div class="clear"></div>
</div>

.box{
     border: 1px solid red;
     background-color: gray;
}
.textFloat{
     float: left;
}
.clear{
     clear: both;
 }

• 优点：简单，代码少，浏览器兼容性好。
• 缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。

2. 使用CSS的overflow属性

<h2>使用CSS的overflow属性</h2>
<div class="box">
      <p class="textFloat">text</p>
</div>

.box {
      border: 1px solid red;
      background-color: gray;
      overflow: hidden;
      /* 父元素设置容器宽高或设置 zoom:1 */
      /* 在 IE6 中还需要触发 hasLayout,所以设置zoom:1 */
      *zoom: 1;
      /* width: 100px;
      height: 100px; */

}
.textFloat{
        float: left;
}

3. 使用CSS的:after伪元素

<h2>使用CSS的:after伪元素</h2>
    <div class="box clearfix">
    <p class="textFloat">text</p>
</div>

.box {
      border: 1px solid red;
      background-color: gray;
}
.textFloat {
      float: left;
}
/* 伪元素清除浮动 */
.clearfix:after{
        content: '';
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
}
.clearfix{
        /* 触发 hasLayout */
        zoom: 1;
}