前端笔记18——CSS浮动（float）带来的问题以及清除浮动

野生杂学家阿博

于 2018-10-13 23:33:13 发布

阅读量535

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： CSS float 浮动清除浮动

93 篇文章

订阅专栏

本文探讨了CSS中使用浮动(float)属性可能引发的布局问题，如元素重叠，并介绍了解决方案——清除浮动，通过在浮动元素后添加清空样式避免布局混乱。

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

在《CSS学习——初识浮动（float）》博客中，我介绍了学习到的CSS的浮动。那么我们使用浮动属性会不会带来什么问题呢？下面就说说浮动（float）带来的问题以及如何清除浮动。

有可能会影响到后面元素的布局，可以元素会重叠造成界面的重叠。

最简单粗暴的方法就是：在浮动过的元素后面一定要清除浮动。代码示例：

<div class="main">
	<div class="left"></div>
	<div class="right"></div>
	<div style="clear: both;"></div>
</div>