父级边框塌陷?
问题描述
网页布局时,使用 float 浮动属性,如果父级元素的子元素浮动了,就会影响到父级元素的边框。
eg:
未添加 float 属性:未塌陷
添加 float 属性后:塌陷
期待结果:使用 float 未塌陷
解决方法
1、增加父级元素的高度
#father {
height: 800px;
}
2、增加一个空的div标签,清除浮动
/*添加在浮动子元素后*/
<div class="clear"></div>
/*为该空标签添加clear: both*/
.clear{
margin: 0;
padding: 0;
clear: both;
}
eg:
3、overflow
/*在父级元素中添加overflow: hidden*/
overflow:hidden;
eg:
4、父类添加一个伪类:after
#father: after {
content: "";
display: block;
clear: both;
}
总结
1、增加父级元素的高度(不推荐)
操作简单,但高度无法确定,会被限制,不能从本质上解决问题。
2、增加一个空的div标签,清除浮动
操作简单,但是加了一个空的div,增加代码复杂性、造成代码的冗余。
3、overflow
操作简单,但是有一点不好,在有下拉菜单的时候,下拉菜单会显示不出来,下拉的一些场景避免使用。
4、父类添加一个伪类:after(推荐)
写法较复杂,但是无副作用,推荐使用。