<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框塌陷的解决办法</title>
<style>
.father{
border: 1px solid red;
}
.one{
width: 100px;
height: 200px;
background-color: #1abc9c;
float: left;
}
.two{
width: 100px;
height: 100px;
background-color: #4d8bcd;
float: left;
}
.three{
width: 200px;
height: 100px;
background-color: #5bbf5a;
float: right;
}
</style>
</head>
<body>
<div class="father">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</body>
</html>
图一:
图二:
通过上述代码,可以看出:father div中没有设置宽高属性,属于标准文档层(高度全靠内容撑起),在one,two,three三个div没有设置float时(见图一),一切正常;当设置float时(见图二),father div没有了高度,one,two,three三个div脱离了标准文档层,这个时候就出现了边框塌陷的现象。
解决办法:
给父级元素添加一个after伪类:
.father:after{
content:"";
display: block;
clear: both;
}
效果展示: