高度塌陷&清除浮动

清除浮动的方式有哪些？请说出各自的优点

在文档流中，父元素的高度默认是由子元素撑开的，等于说子元素多高，父元素就多高，但是当为子元素设置了浮动之后，子元素会脱离文档流，此时，将会导致子元素无法撑起父元素的高度，会导致父元素的高度塌陷

子元素未设置浮动:子元素将父元素撑开

子元素设置浮动：子元素脱离文档流，子元素无法撑起父元素的高度，导致父元素高度塌陷

• 清除浮动方式1：给父元素单独定义高度

优点：快速简单，代码少 缺点：无法进行响应式布局

为父元素定义高度100px

• 清除浮动方式2：父级定义overflow：hidden；zoom：1（针对ie6的兼容）

优点：简单快速、代码少，兼容性较高 缺点：超出部分被隐藏，布局时要注意

• 清除浮动方式3：在浮动元素后面(父元素的最后一个子元素)加一个空标签，clear：both

优点：简单快速、代码少，兼容性较高。

缺点：增加空标签，不利于页面优化

• 清除浮动方式4：父级定义overflow：auto
  
  优点：简单，代码少，兼容性好

缺点：内部宽高超过父级div时，会出现滚动条

• 清除浮动方式5：万能清除法（推荐）：

给塌陷的元素添加伪对象

.father：after{     
     Content：“”；
     Clear：both；
     display：block；
}

优点：写法固定，兼容性高 缺点：代码多