在前端页面开发过程中,经常会遇到父元素中的子元素因为浮动而导致父元素高度为0的情况,如何解决这种问题,使得父元素能够撑起高度,以下提供四种解决方法:
方法一:额外标签法
在最后一个浮动标签后面添加一个新的标签,其CSS设置为clear:both
。这种方式的缺点是额外增加了标签元素,而且语义化较差。
方法二:父元素添加overflow属性
.father {
...
overflow: hidden;
}
采用这种方式在内容增多的情况下, 超出的内容会被隐藏掉,无法显示溢出的内容。
方法三:使用after伪元素
.father:after {
content: '';
height: 0;
clear: both;
visibility: hidden;
}
.father {
*zoom: 1; /* ie6清除浮动的方式,*号只有ie6-ie7执行,其它游览器不执行 */
}
方法四:使用before和after双伪元素
.father:after .after:before {
content: '';
display: table;
}
.father:after {
clear: both;
}
.father {
*zoom: 1;
}
比较推荐使用方法三和方法四;其中由于ie6-7不支持伪元素:after,所以使用zoom:1触发。