浮动和清除浮动

块级元素添加浮动后具有了行内块元素的特性。行内元素添加浮动后也具有了行内块元素的特性。

清除浮动:
1、添加标签 <div style="clear:both"></div>
优点：通俗易懂，书写方便。
缺点：添加无意义标签，结构化比较差。
2、给父级添加overflow：hidden属性，通过促动BFC，清除浮动。
优点：代码简洁。
缺点：内容增多时容易造成不会自动换行导致内容被隐藏，无法显示需要溢出的元素。
3、通过伪元素：after的方式
如：
.clearfix:after{
content:"."; <!-- 内容尽量为小点，尽量不要加空格，旧版本浏览器会有空隙。 -->
display:block;
height:0;
visibility:hidden;
clear:both;
}
.clearfix{
*zoom:1; <!-- *代表ie6/7能识别的特殊符号，带有这个*的属性，只有ie6,7才能执行。zoom就是ie6、7清除浮动的方法。 -->
}
4、【强烈推荐】通过双伪元素清除浮动，
.clearfix:before, .clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1;
}