CSS：解决高度塌陷的问题

最新推荐文章于 2023-03-19 21:40:24 发布

HiLiou

最新推荐文章于 2023-03-19 21:40:24 发布

阅读量113

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/HiLiou/article/details/108394095

版权

当父元素高度自适应时，其子元素浮动后，父元素的高度会变成0

<div class="div1">
	<div class="div2"><div>
</div>

指定父元素高度

.div1{
	height: 100px;				
	border: 10px solid black;
}
.div2{
	height: 50px;
	width: 50px;
	background-color: red;
	float: left;
}

开启BFC（块级格式化上下文）

开启BFC的特点：
 a. 父元素的垂直外边距不会和子元素重叠
 b. 开启BFC的元素不会被浮动元素所覆盖
 c. 开启BFC的元素可以包含浮动的子元素

开启BFC的方式：

 a. 设置父元素浮动

.div1{
	border: 10px solid black;
	float: left;
}

 b. 设置元素绝对定位

.div1{
	border: 10px solid black;
	position: absolute/fixed;
}

 c. 设置父元素为行内块元素

.div1{
	border: 10px solid black;
	display: inline-block;
}

 d. 设置父元素的overflow值为非visible

.div1{
	border: 10px solid black;
	overflow: hidden;
}

添加空白元素

.div1::after{
	content: "";
	display: table;
	clear: both;
}

IE6及以下

IE6及以下浏览器不支持BFC，使用hasLayout属性

.div1{
	zoom: 1;
}

总结

将高度塌陷和垂直外边距重叠的问题一起解决的方案如下

.clearfix{
	zoom:1;
}
.clearfix::before,
.clearfix::after{
	content: '';
	display: table;
	clear: both;
}

关注