HTML之父级边框塌陷问题
HTML代码
<head>
<style>
.box{
border: 2px solid wheat;
background-color: wheat;
}
.d1{
border: 2px solid aquamarine;
background-color: aquamarine;
width: 200px;
height: 200px;
float: left;
}
.d2{
border: 2px solid sienna;
background-color: sienna;
width: 200px;
height: 200px;
float: left;
}
.d3{
border: 2px solid darkorchid;
background-color: darkorchid;
width: 200px;
height: 200px;
float: right;
}
.d4{
border: 2px solid palegreen;
background-color: palegreen;
width: 200px;
height: 200px;
float: right;
}
</style>
</head>
<body>
<div class="box">
<div class="d1">盒子1</div>
<div class="d2">盒子2</div>
<div class="d3">盒子3</div>
<div class="d4">盒子4</div>
</div>
</body>
解决方法一
给父级元素设置高度和宽度属性值
.box{
border: 2px solid black;
background-color: wheat;
width: 1200px;
height: 300px;
}
解决方法二
在父级元素的最后增加一个空的div, 并且清除浮动
<div class="d5"></div>
.d5{
clear: both;
}
解决方法三
给父级元素添加一个overflow
属性
overflow: hidden
解决方法四
给父类添加一个伪类
.box:after{
content: "";
display: block;
clear: both;
}