clear
/*
clear: right; 右侧不允许有浮动元素
clear: left; 左侧不允许有浮动元素
clear: both; 两侧不允许有浮动元素
clear: none;
*/
解决方案:
1.增加父级元素的高度
#father {
border:1px #000 solid;
height: 800px;
}
2.增加一个空的div标签,清除浮动
<div class="clear"></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(推荐)
写法稍微复杂一点,但是没有副作用,推荐使用!