清浮动的两种情况：
1.父级没有高度时，父级的高度是由子元素撑开的，但子元素浮动后，父元素的高度无法被撑开，所以需要清浮动；
2.新加入的兄弟级标签，希望不受之前浮动元素的影响，则需要清浮动。
清除浮动的五种常用方法：
1.空标签清浮动
给空标签设置clear : both;
优点：简单易懂，容易掌握；
缺点：会出现大量无语义的空标签，不利于维护。
补充：clear清浮动
书写方式——clear : left / right / none / both;
left : 左侧不允许有浮动元素；
right : 右侧不允许有浮动元素；
none : 允许浮动元素在两侧；
both : 不允许浮动。
2.<br>标签清浮动
<br>标签自带属性：<br clear = "all" />;
优点：比空标签清浮动方式语义性较强；
缺点：结构与样式未分离。
3.父级设置overflow
原理：让父级能够紧贴其内容，实现清浮动；
overflow：hidden | auto ;
hidden：超出内容隐藏；
auto：默认属性，在需要时剪切内容并添加滚动条；
优点：不存在结构和语义化问题；
缺点：hidden在内容增多时会导致内容被隐藏；
auto在多个嵌套后，有时会造成内容全选；
4.子级元素浮动，父级元素也浮动
优点：不存在结构和语义化问题，代码量少；
缺点：使得与父级相邻的元素的布局会受影响。
5.after伪元素清浮动
原理：相当于用一个高度为0的块来代替空标签；
.clearfix : after {
display: block;
clear: both;
height: 0;
content: “\200B”;
}
优点：结构语义化正确，代码量少；
缺点：盒模型属性已改变。
伪元素的特性
伪元素after和before的特性
两个伪元素会在页面元素之前或之后插入一个元素
伪元素在页面中生成的元素是行元素
伪元素after和before兼容
.test : before, .test before {}
.test : after, .test after {}
说明：一个是冒号分隔，一个是空格分隔。
前者兼容IE8+及其它现代浏览器；后者兼容IE6/7。
