清除浮动效果的三种方式

浮动效果
满足我们的页面排版要求，使竖列的盒子横向的排列起来。
负作用：因为浮动元素脱离了标准文档流，会导致父级元素无法被撑开。

解决方式：清除浮动负面效果（三种方式）

1. 添加空盒子
   优点：较流行
   缺点：为清除浮动，页面添加的空盒子太多，新手容易晕
   用法：在浮动元素后面（同级元素）添加一个空的div，并且定义一个clear类，附给该div
   .clear{clear:both;}

2. overflow:hidden
   优点：较简单，兼容于市面浏览器
   缺点：负面效果不详，暂不推荐使用
   用法：定义clear类，并把clear类附给浮动元素的父级元素
   .clear{display:block;overflow:hidden;}

3. 最流行、最常用、可兼容所有浏览器
   用法：定义clear类，使用伪元素:after，并把clear类附给浮动元素的父级元素
   .clear:after{display: block;clear: both;content:”.”;visibility: hidden;height:0;}
   .clear{zoom: 1;}

说明：
1. display:block 以块级元素显示
2. display:inline 以行内元素显示
3. visibility的作用是把.隐藏