如何消除子元素浮动造成父元素高度折叠的影响
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css1.css"> <title>Document</title> </head> <body> <div class="box1"> <div class="box2">子区块1</div> <div class="box3">子区块2</div> </div> <!-- 浮动定位实现 --> <div class="box5"> <div class="box6"></div> <div class="box7"></div> <div class="box8"></div> </div> <!-- 绝对定位实现 --> <div class="box11"> <div class="box12">子区块1</div> <div class="box13">子区块2</div> <div class="box14">子区块3</div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
.box1 {
width: 500px;
border: 3px #f00 dashed;
overflow: hidden;
}
.box2 {
width: 200px;
height: 300px;
float: left;
background-color: lightcoral
}
.box3 {
width: 200px;
height: 300px;
float: left;
background-color: lightgreen;
}
/* 浮动定位实现 */
.box5 {
margin: 50px auto;
width: 500px;
border: 2px #f00 dashed;
background-color: lawngreen;
overflow: hidden;
}
.box6 {
float: left;
width: 100px;
height: 400px;
background-color: lightsalmon
}
.box7 {
float: left;
width: 300px;
height: 400px;
background-color: lemonchiffon;
}
.box8 {
float: right;
width: 100px;
height: 400px;
background-color: lightskyblue;
}
/* 绝对定位实现 */
.box11 {
margin: 50px auto;
width: 500px;
border: 2px #f00 dashed;
background-color: lightgray;
position: relative;
height: 500px;
}
.box12 {
width: 100px;
height: 400px;
background-color: lightpink;
position: absolute;
top: 0;
left: 0;
}
.box13 {
width: 300px;
height: 400px;
background-color: lightslategrey;
position: absolute;
top: 0;
left: 100px;
}
.box14 {
width: 100px;
height: 400px;
background-color: lightgreen;
position: absolute;
top: 0;
left: 400px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例