解决子元素浮动,父元素高度变小的问题
当子元素浮动时,脱离了文档流,不占据原来的页面空间,使父元素的高度变小,甚至为0,我们可以通过几种方式来解决这个问题。
解决办法如下:
1.设置父元素的overflow为hidden。缺点:把本应该显示的元素隐藏。
2.在知道父元素本应该是多高的情况下,设置父元素的高度。缺点:不知道父元素高度的不适合。
3.添加空的块级元素,并设置其style属性值为clear:both;例如:<div style='clear:both'></div>。缺点:增加代码冗余
4.内容生成(推荐)。格式如下:
element(父元素):after{
content:'';
display:block;
clear:both;
}