解决方案:
1、增加父级元素的高度
#father{
border: 1px #000 soild;
height:500px;
}
2、增加一个空的div标签,清除浮动
<div ></div>
.clear{
clear:both;
margin: 0;
padding: 0;
}
3、overflow
在父级元素中增加一个 overflow: hidden;
4、父类添加一个伪类: after
#father:after{
content: '';
display: block;
clear: both;
}
小结:
- 浮动元素后面增加空div
增加,代码中尽量避免空div - 设置父元素的高度
简单,元素假设有了固定的高度,就会被限制 - overflow
简单,下拉的一些场景避免使用 - 父类添加一个伪类:after(推荐)
写法稍微复杂一点,但是没有副作用,推荐使用!