父级边框塌陷问题
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#father {
border: 2px dashed slateblue;
}
#img {
border: 1px dashed salmon;
float: left;
}
span {
border: 1px dashed #25e10f;
float: right;
clear: both;
}
#img1 {
border: 1px dashed #64c2d3;
float: left;
}
#img2 {
border: 1px dashed #ff7500;
float: right;
}
</style>
</head>
<body>
<div id="father">
<img src="image/img.png" alt="img" id="img">
<img src="image/img_1.png" alt="img1" id="img1">
<img src="image/img_2.png" alt="img2" id="img2">
<span>有信念不一定会成功,没信念一定会失败。</span>
</div>
</body>
</html>
可以看到父级边框已经塌陷了(红框圈住的部分)
解决方案
1、给父级边框增加高度
特点:简单,但是元素设有了固定的高度,就会被限制
#father {
border: 2px dashed slateblue;
height: 800px;
}
2、浮动元素后面增加一个空的 div 元素,并声明 clear: both; 清除浮动样式
特点:简单,但是在代码中应该尽量避免空 div
<div class="clear"></div>
.clear {
clear: both;
margin: 0;
padding: 0;
}
3、给父级边框添加一个 overflow: hidden;
特点:简单,但是不适用需要下拉、一些不能被切除的场景,避免使用
#father {
border: 2px dashed slateblue;
overflow: hidden;
}
4、在父类边框添加一个伪类: after
特点:是市面上比较推荐的处理方式,其实和添加一个空 div 原理相同,但是避免了手动添加,从程序的角度解决问题,推荐使用
#father:after {
/* 添加一个空内容的块级元素,并且清空浮动 */
content: '';
display: block;
clear: both;
}
溢出 overflow
overflow 属性规定当内容溢出元素框时发生的事情。
语法
/* 默认值。内容不会被修剪,会呈现在元素框之外 */
overflow: visible;
/* 内容会被修剪,并且其余内容不可见 */
overflow: hidden;
/* 内容会被修剪,浏览器会显示滚动条以便查看其余内容 */
overflow: scroll;
/* 由浏览器定夺,如果内容被修剪,就会显示滚动条 */
overflow: auto;
/* 规定从父元素继承overflow属性的值 */
overflow: inherit;
示例
p {
width: 12em;
height: 6em;
border: dotted;
overflow: visible; /* 内容不会被修剪 */
}
p { overflow: hidden; /* 不显示滚动条 */ }
p { overflow: scroll; /* 始终显示滚动条 */ }
p { overflow: auto; /* 必要时显示滚动条 */ }