第一种方法:内墙法,w3c推荐的方式;
首先给定两个盒子`
<div class="outer">
<div class="box1"></div>
<div class="box2"></div>
</div>
设定盒子样式为:
.box1 {
height: 300px;
width: 100px;
background-color: #51b7ec;
float: left;
}
.box2 {
height: 200px;
width: 100px;
background-color: red;
float: left;
}
用浮动可以解决盒子间隙问题但是会造成高度塌陷,也就是outer的盒子没高度了。此时使用内墙法可以解决。
在给定的盒子里面再加一个盒子如:<div class="clearfix"></div>
然后给这个盒子指定样式如
.outer .clearfix {
clear: both;
}
这样就会解决高度塌陷问题啦。
第二种方法:父元素添加:overflow: hidden;`
.outer {
overflow: hidden;
}
.box1 {
height: 300px;
width: 100px;
background-color: #51b7ec;
float: left;
}
.box2 {
height: 200px;
width: 100px;
background-color: red;
float: left;
}`
第三种方法:双伪元素浮动(腾讯、小米均在使用)
直接导入如下代码:
.clearfix:before,.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}`
盒子如下:
<div class="clearfix">
<div class="box1"></div>
<div class="box2"></div>
</div>
以上就是解决高度塌陷问题的方法啦。
浮动造成的高度塌问题——清除浮动
最新推荐文章于 2024-08-26 19:16:26 发布