清除浮动

---

一、为什么要清除浮动？

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

	<div class="outer">
      <div class="box1"></div>
      <div class="box2"></div>
    </div>

      .outer {
        width: 300px;
        border: solid 1px #000;
      }
      .box1 {
        width: 100px;
        height: 60px;
        background: darkkhaki;
      }
      .box2 {
        width: 80px;
        height: 100px;
        background: peachpuff;
      }

在浏览器上样式如下：

在上述css中给子元素box1，box2增加浮动后：

      .box1, .box2{
        float: left;
      }

浏览器上样式如下：

二、浮动引起的问题

1. 父元素的高度无法被撑开，影响与父元素同级的元素
2. 与浮动元素同级的非浮动元素会跟随其后
3. 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

三、清除浮动的方法

所有解决方法图示：

1.空标签

在所有浮动标签后面添加一个空标签，定义css属性clear：both。
弊端就是增加了无语义的标签，使HTML结构看起来不够简洁。

	<div class="outer">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="cl"></div>
    </div>

      .cl{
        clear: both;
      }

2.overfow

给包含浮动元素的父标签添加css属性overflow：auto/hidden; zoom：1;
zoom：1用于兼容IE6

      .outer {
        width: 300px;
        border: solid 1px #000;
        overflow: auto;
        /* overflow: hidden; */
        zoom: 1;
      }

3.after伪标签

该方法只适合于非IE浏览器。
该方法中必须为需要清除浮动元素的伪元素中设置height：0和display：block

      .outer::after{
        content: '';
        height: 0;
        display: block;
        clear: both;
      }