清除浮动

一、浮动
浮动元素脱离文档流，不占据空间。

二、浮动元素引起的问题
（1）父元素的高度无法被撑开。
（2）与浮动元素同级的非浮动元素（内联元素）会跟随其后。
（3）若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

示例代码：

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .main {
      border: 5px solid red;
    }

    .div1 {
      float: left;
      width: 100px;
      height: 100px;
      background: orange;
    }

    .div2 {
      float: left;
      width: 100px;
      height: 100px;
      background: pink;
    }

    .div3 {
      float: left;
      width: 100px;
      height: 100px;
      background: blue;
    }
  </style>

  <div class="main">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
  </div>

运行效果：

三、清除浮动的方式
（1）额外标签法
在所有浮动标签后添加一个空标签，定义css（clear:both;）

<div style="clear:both;"></div>

缺点：增加额外标签，使HTML结构看起来不够简洁。

（2）使用overflow
给包含浮动元素的父标签添加overflow: hidden;

.main {
      border: 5px solid red;
      overflow: hidden;
    }

（3）使用after伪类（常用）

.clearfix:after {
      /*伪元素是行内元素 正常浏览器清除浮动方法*/
      content: "";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }

    .clearfix {
      *zoom: 1;
      /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }

<div class="main clearfix">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
  </div>

清除浮动后的效果图：