清除浮动

清除浮动的几种方式

1. 给前面元素设置高度。（尽量不用）
2. 给后面的盒子添加clear属性

取值	含义
none	默认取值，按照浮动元素的排序规则来排序
left	当前元素不要找前面的左浮动
right	当前元素不要找前面的右浮动
both	不要找前面的左浮动和右浮动

注意点：当给某个元素添加clear属性后，该元素的margin失效。

3. 隔墙法
   3.1 外墙法:在两个盒子之间添加一个额外的块级元素，设置clear: both;
   注意点：
   ① 外墙法可以让第二个盒子使用margin-top属性，但是不可以让第一个盒子使用margin-bottom属性。
   ② 所以不要设置margin，而是直接在额外标签设置height，实现margin的效果。
   3.2内墙法：在第一个盒子中，所有子元素最后添加一个额外的块级元素，设置clear: both;
   注意点：
   ① 内墙法可以让第二个盒子使用margin-top属性，也可以让第一个盒子使用margin-bottom属性。
4. 伪元素选择器清除浮动

.class::after {
      /* 设置添加子元素的内容是空 */
      content: '';  
      /* 设置添加子元素为块级元素 */
      display: block;
      /* 设置添加的子元素的高度0 */
      height: 0;
      /* 设置添加子元素看不见 */
      visibility: hidden;
      /* 设置clear：both */
      clear: both;
    }
    /* 用伪类清除浮动时，用此适配ie6以下 */
    .box1 {  
      *zoom: 1;
    }

5. 利用overflow: hidden清除浮动
   5.1 让超出标签的内容不显示
   5.2 清除浮动
   5.3 在父子元素中：给父元素设置此属性，子元素设置margin-top之后。父元素不会被顶下来