一、当我们使用浮动导致父盒子出现高度塌陷的问题时,应该如何来处理呢?这里我提供两种方法。
直接在父盒子后面添加一个空盒子box4,再去除该盒子的浮动。
结构层代码:
<div class="wrapper">
<div class="box1 box"></div>
<div class="box2 box"></div>
<div class="box3 box"></div>
<div class="box4"></div><!-- 注意要在父盒子的最后面添加空盒子,
不可在其他位置添加 -->
</div>
样式层代码:
.wrapper{
width: 300px;
height: auto;/* 让父盒子高度由内容来撑开只需height:auto,或者将高度属性直接去掉 */
border: 5px red solid;
}
.box{
width: 100px;
height: 100px;
float: left;
}
.box1{
background-color: green;
}
.box2{
background-color: yellow;
}
.box3{
background-color: blue;
}
.box4{
clear: both;/* 这里直接使用both,不必考虑清除哪边的浮动 */
}
以上方法不建议使用,因为需要改变结构层代码,并且添加的空盒子没有盛放内容,解析器依然会解析,但毫无意义。
万能公式法:使用伪元素来处理高度塌陷问题,伪元素即直接通过css来清除出浮动影响。css3指定了一个类名clearfix,用来作为解决高度塌陷问题的专属类名。只要遇到需要添加浮动的元素,就给其父盒子添加一个clearfix。
结构层代码:
<body>
<div class="wrapper clearfix"><!-- 给父盒子添加一个用于清除浮动的类名clearfix -->
<div class="box1 box"></div>
<div class="box2 box"></div>
<div class="box3 box"></div>
</div>
</body>
样式层代码:
<style>
.wrapper {
width: 300px;
height: auto;
/* 让父盒子高度由内容来撑开只需height:auto,或者将高度属性直接去掉 */
border: 5px red solid;
}
.box {
width: 100px;
height: 100px;
float: left;
}
.box1 {
background-color: green;
}
.box2 {
background-color: yellow;
}
.clearfix::after {
/* 此处不能用before */
content: '';
display: block;
/* 将其变成块元素 */
clear: both;
}
</style>