接上篇（解决float导致塌陷问题）之clear:both失效

最新推荐文章于 2022-03-14 15:49:27 发布

normol

最新推荐文章于 2022-03-14 15:49:27 发布

阅读量1.1k

点赞数

分类专栏： html css javascript 文章标签： css clearboth clearboth失效 float引发问题

本文链接：https://blog.csdn.net/normol/article/details/52887596

版权

html css javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

在今天写的途中发现一个问题，虽然解决，可并不知道原因是什么，现在先记下来。

问题的简化版大概是这样：若父元素里有一个以上的元素为浮动，那么，清除浮动（无论是用伪类还是新增一个类的方法）无效。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.fu1{
		border: 1px solid black;
		zoom:1;
	}
	.son1{
		height: 300px;
		width: 300px;
		float: left;
		background-color: green;
	}
	.son2{
		height: 300px;
		width: 300px;
		float: left;
		background-color: yellow;
	}
	.fu2{
		width: 800px;
		height: 200px;
		border: 2px solid black;
	}
	.clear:after{
		content: ".";
		height: 0;
		visibility: hidden;
		display: block;
		clear: both;
	}

	</style>
</head>
<body>
	<div class="fu1">
		<div class="son1">
		</div>
		<div class="son2 .clear">
		</div>
	</div>
	<div class="fu2">
	</div>
</body>
</html>

这样清除浮动仍然无法让父元素撑开。

只能通过父元素设置overflow:hidden 或者显式设置高度来撑开fu1高度

一定要注意，若设置父元素fu1 position:absolute时，父元素的高度是可以被撑开，并且体现了absolute的包裹性，表现即宽度也与内容自适应了，

但是fu1仍然不在文档流中！，所以fu2会跑去上面，达不到我们想要的效果。