解决子元素浮动，父元素高度变小的问题

当子元素浮动时，脱离了文档流，不占据原来的页面空间，使父元素的高度变小，甚至为0，我们可以通过几种方式来解决这个问题。

解决办法如下：

1.设置父元素的overflow为hidden。缺点：把本应该显示的元素隐藏。

2.在知道父元素本应该是多高的情况下，设置父元素的高度。缺点：不知道父元素高度的不适合。

3.添加空的块级元素，并设置其style属性值为clear:both；例如：<div style='clear:both'></div>。缺点：增加代码冗余

4.内容生成(推荐)。格式如下：

element(父元素):after{

　　content:'';

　　display:block;

　　clear:both;

}

转载于:https://www.cnblogs.com/demonswang/p/5952560.html