css清除浮动的3种方法

一般情况下不给父元素设置宽高时，父元素的宽高会被子元素的宽高撑开的。当子元素设置了浮动属性float后，子元素会溢出到父元素外（俗称脱离文档流），这样父元素的宽高就不会被撑开（高度塌陷）。这也·可以说是浮动的一个副作用。

解决办法：

1.overflow：hidden；（子元素设置浮动后，直接给父元素添加overflow：hidden；属性）

优点：语义化代码少

缺点：可能因为后期内容增加导致超出尺寸的内容被隐藏。

2.使用clean：both；（新增一个空div，然后给这个div添加clean：both属性）

优点：语义化

缺点：增加一个空div，并设置css样式违背结构与表现分离的原则（代码耦合）

3.使用伪类：：after（给末尾添加一个看不见的块元素来清除浮动）

优点：语义化明确，遵循了结构与样式、行为分离的原则

缺点：。。。。。