清浮动

当有浮动元素时就会影响下面的元素排列，此时就需要清除浮动防止出现问题
1.解决上下排列的情况：利用clear属性，clear属性可选的值有：left、right和both
如果上层盒子是左浮动，下层容器就用clear:left;清除左浮动，如果是右浮动，下层容器就用clear:right;清除浮动，但是可以用clear:both；清除两种浮动，如下图：



2.解决嵌套排列的情况:再给子元素加浮动后，父元素不写高度时容器高度不会被撑开，如下图：

解决这种问题方案：
a.固定宽高，如下图：

但是这种方案不够智能，不适合做自适应效果，因为当子元素高发生变化时，父容器高也要发生变化。
b.父元素浮动，但此时会影响下面元素排列

c.ovreflow:hidden;（BFC规范），但是如果有子元素想溢出，就会影响到下面的元素，如下图：

d.display:inline-block;（BFC规范），但这种做法也会影响到后面元素的排列，如下图：

e.在父容器里加一个空div标签，如下图：

f.after伪类，目前各大公司的做法，如下图：