CSS响应式布局之清除浮动

最新推荐文章于 2025-03-10 19:40:59 发布

VIctor_Ye

最新推荐文章于 2025-03-10 19:40:59 发布

阅读量1k

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.youkuaiyun.com/victoryzn/article/details/82943351

版权

css 专栏收录该内容

6 篇文章

订阅专栏

本文深入探讨了前端布局中常见的浮动问题及解决策略，包括使用clear:both、overflow:hidden和伪元素:after的方法，帮助开发者避免父级元素高度塌缩，确保页面布局的准确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在很多前端工程师日常工作中，在使用到float布局时，总会有一点需要去考虑的，那就是清除浮动问题。

那这个问题怎么会发生的呢？

当float子元素高度超出父级元素高度时，父级元素高度塌缩，因为float元素脱离文档流，其布局不受父元素控制

这个情况如下图所示

代码如下：

<style>
	.wrap {
		padding: 30px;
		background: #CECECE;
		color: #FFFFFF;
		text-align: center;
		line-height: 100px;
	}
	
	.left {
		float: left;
		background: #00A8FE;
		width: 300px;
		height: 200px;
		padding: 10px;
		text-align: center;
		line-height: 200px;
		color: #FFFFFF;
		opacity: 0.3;
	}
	
	.right {
		float: right;
		background: #9ACD32;
		width: 300px;
		height: 200px;
		padding: 10px;
		text-align: center;
		line-height: 200px;
		color: #FFFFFF;
		opacity: 0.3;
	}
</style>
<article class="wrap">
	wrap
	<div class="left">left</div>
	<div class="right">right</div>
</article>

那这个问题怎么解决呢？

1. clear：both

在父级元素内部加个div，设置clear: both即可，清除两边的浮动。

<style>
       ...
	.clear {
		clear: both;
	}
</style>
<article class="wrap">
	wrap
	<div class="left">left</div>
	<div class="right">right</div>
	<div class="clear"></div>
</article>

2. overflow：hidden

<style>
    ...

	.wrap {
		overflow: hidden; // auto也可以，但是切记visible不行
	}
    ...
</style>
<article class="wrap">
	wrap
	<div class="left">left</div>
	<div class="right">right</div>
</article>

3. :after伪元素

<style>
    ...

	.wrap:after {
		clear: both; // auto也可以，但是切记visible不行
	}
    ...
</style>
<article class="wrap">
	wrap
	<div class="left">left</div>
	<div class="right">right</div>
</article>

这里有个伪元素的知识点：

:before和:after是分别在当前元素内部的前后插入两个元素块。

这里再wrap类后价格:after伪元素，其实和解决方案一一样，在内部的最后加一个元素，里面使用clear:both从而达到清除浮动的效果。

清除浮动后效果：