float浮动

浮动是浮在上面的，要有边框，或者设置宽高否则会塌陷

下面的塌陷是有边框或者设置了宽高后还塌陷
a) 使用浮动属性float之后，存在边框塌陷问题
边框塌陷：是指使用浮动属性的父元素的宽和高，没有被子元素撑开.

四种边框塌陷的解决方案之一： 清除浮动，要引入新属性clear

如

clear:both;

四种边框塌陷的解决方案之一： 添加子元素，并清除左右浮动
缺点：要额外添加一个子元素，太麻烦。
例如下面多添加div子元素

四种边框塌陷的解决方案之二：直接设置父元素的高度
缺点：父元素的高度，不能根据子元素的高度，自动调整。

四种边框塌陷的解决方案之三：直接设置父元素的overflow属性
缺点：超出的部分被隐藏了，可能与实际要求不一致，没法做动自适应。

overflow属性

四种边框塌陷的解决方案之四：父元素添加伪类:after**（大部分只用这个）**
优点： 不要对父子元素做额外的操作，只是简单地为父元素添加一个伪类即可。


四种边框塌陷的解决方案——小结