解决父元素塌陷的问题

最新推荐文章于 2023-06-25 22:47:50 发布

Hairui瑞

最新推荐文章于 2023-06-25 22:47:50 发布

阅读量2.5k

点赞数 7

分类专栏：前端文章标签： html css3 父元素塌陷

本文链接：https://blog.csdn.net/qq_44322357/article/details/90759369

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

父元素塌陷的定义：

在标准文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当子元素浮动之后，子元素会完全脱离文档流，无法撑开父盒子，导致父盒子没有高度。

父盒子中的子元素浮动之前：

让父盒子中的元素浮动（float:left;），发现父盒子中的背景没有了

HTML主体结构

<body>
	<div class="father">
		<div class="son1"></div>
		<div class="son2"></div>
		<div class="son3"></div>
	</div>
</body>

要想让父盒子中的内容显示出来，需要对其清除浮动，方法有三个

1.使用after伪对象清楚浮动（推荐）

在说这种方法以前先解释几个东西的作用

:after 选择器在被选元素的内容后面插入内容。使用content属性来指定要插入的内容。

这种清除浮动的方法大概思想是在父元素的空内容后添加了一个空内容，并对这个空的内容清除浮动

<style>
		.father:after{
			display: block;
			clear: both;
			content: "";
		}
</style>

发现绿色的父元素被撑开了

2.使用空标记清除浮动

在浮动元素之后添加一个空标记，并对这个空标记应用clear:both;,不过这种方法不建议使用，因为增加了毫无意义的结构元素（空标记）

	<style>
		.blank{
			clear:both;
		}
	</style>
<body>
	<div class="father">
		<div class="son1"></div>
		<div class="son2"></div>
		<div class="son3"></div>
		<div class="blank"></div><!-- 添加的空标记 -->
	</div>
</body>
</html>

发现绿色的父元素被撑开了

3.使用`overflow:hidden;`清除浮动

<style>
		.father{
				overflow:hidden;
		}
</style>

发现绿色的父元素被撑开了

Hairui瑞

关注

7
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
解决父元素塌陷的问题

父元素塌陷的定义：
复制链接

扫一扫

专栏目录

解决父元素塌陷的问题

1.使用after伪对象清楚浮动（推荐）

2.使用空标记清除浮动

3.使用overflow:hidden;清除浮动

“相关推荐”对你有帮助么？

3.使用`overflow:hidden;`清除浮动