1 盒子塌陷的原因
什么是盒子塌陷?
外部的盒子没有包裹住内部的浮动盒子,导致了盒子塌陷。
盒子高度塌陷原因?
①父元素没有设置高度(height);
②且其子元素脱离了文档流,导致内部没有元素可以撑起当前父元素:a. 内部子元素使用了浮动导致内部元素脱离了文档流,且脱离文档流的元素无法撑起当前父元素。
b. 内部子元素使用了绝对定位或者固定定位脱离文档流。
示例:设置一个父div和一个子div,首先不设置父盒子的高度,给父盒子设置宽度,然后为子盒子设置宽度和高度
<div class="father">
<div class="child"></div>
</div>
<style>
.father {
width: 200px;
background-color: pink;
}
.child {
width: 100px;
height: 80px;
background-color: orange;
}
</style>
在上面的例子中,由于父盒子没有设置高度,因此高度是子盒子的高度。那么如果给子盒子添加浮动属性,就会造成高度塌陷:
.child {
width: 100px;
height: 80px;
float: left;
background-color: orange;
}
2 如何清除塌陷
1、将盒子大小写死,给每个盒子设定固定的width和height,直到合适为止。
优点:简单方便;
缺点:非自适应,浏览器的窗口大小直接影响用户体验。
2、给外部的父盒子也添加浮动,让其也脱离标准文档流。
优点:方便;
缺点:对页面的布局不是很友好,不易维护。
因此在上面的例子中,同时为父盒子和子盒子添加浮动,也会显示完整的效果:
<div class="father">
<div class="child"></div>
</div>
<style>
.father {
width: 200px;
background-color: pink;
/* 为父盒子添加浮动 */
float: left;
}
.child {
width: 100px;
height: 80px;
float: left;
background-color: orange;
}
</style>
3、给父盒子添加overflow:auto;
或者overflow:hidden;
。
优点:浏览器支持好,简单;
缺点:当子元素有定位属性时overflow:auto;
有可能出现滚动条,影响美观。overflow:hidden;
可能会带来内容不可见的问题。
4、父盒子里最下方引入清除浮动块
<div style="clear:both"></div>
优点:所有浏览器都支持,并且容器溢出不会被裁剪;
缺点:引入了不必要的冗余元素 。
因此上面的例子中,可以在子盒子下面添加一行代码,解决盒子塌陷:
<div class="father">
<div class="child"></div>
<!-- 添加清除浮动块 -->
<div style="clear:both"></div>
</div>
<style>
.father {
width: 200px;
background-color: pink;
}
.child {
width: 100px;
height: 80px;
background-color: orange;
float: left;
}
</style>
5、为外部盒子添加after伪类,设置clear属性清除浮动(主流)。
父盒子::after {
content: "";
/* 清除两边的浮动 */
clear: both;
/* 也可以使用display:table; */
display: block;
/* 兼容IE浏览器 */
zoom: 1;
}
优点:不会造成代码冗余,剩余代码性能优化,推荐使用。
在本例中,为父盒子写入伪类清除浮动:
<div class="father">
<div class="child"></div>
</div>
<style>
.father {
width: 200px;
background-color: pink;
}
.child {
width: 100px;
height: 80px;
background-color: orange;
float: left;
}
/* 添加伪类清除浮动 */
.father::after {
content: "";
clear: both;
display: block;
zoom: 1;
}
</style>