浮动元素脱离文档流,所以不占位置,当父元素没有设置高度时,不能撑开,导致父元素的高度塌陷,所以我需要清除浮动。
子元素加clear
在浮动元素后面加一个空的子元素,并给其css属性clear:
<div style="clear:both"></div>
Clear 取值: left | right | both
left: 清除左浮动
right: 清除右浮动
both: 清除所有浮动
父元素加宽高
直接规定父元素的宽高,请不存在塌陷问题了。问题是,父元素的扩展性不好,比如要增加新内容又要重新计算高度
父元素设置 inline-block
将父元素的display 修改成inline-block。问题是会导致父元素margin:auto失效
父元素设置overflow:hidden
父元素设置overflow:hidden,可以解决。问题是要配合宽度
父元素利用伪类after
当前最主流的方式,利用伪元素,相当于给父级多加了一个子元素,同时我们可以将样式公用,所有需要清除浮动的父元素添加一个相同的class名即可。
clear就可以解决:
.clear{
zoom:1;
}
.clear::after{
content:"";
display:block;
clear:both;
}