HTML CSS 清除浮动

最新推荐文章于 2025-05-06 18:27:06 发布

sunday0904

最新推荐文章于 2025-05-06 18:27:06 发布

阅读量348

点赞数

分类专栏：前端文章标签：前端 html css 布局

本文链接：https://blog.youkuaiyun.com/sunday0904/article/details/78160597

版权

3 篇文章

订阅专栏

本文详细介绍了CSS中浮动(float)属性的基本用法及其在实际布局中的应用，包括图片文字环绕和导航栏布局等。同时，文章还探讨了由于浮动元素脱离文档流可能导致的布局问题，并提供了三种有效的清除浮动的方法。

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

使用浮动属性的元素不占用原来的位置，脱离了标准文档流。可以让块级元素在一行显示，顶部对齐。

应用场景包括文档中图片文字环绕、导航栏等布局。

但是由于浮动脱离了标准文档流，使用不当浮动会造成页面布局的混乱，所以要清除浮动。

清除浮动是指清除浮动带来的影响而不是清除浮动的效果。

造成混乱的原因：子元素设置浮动，父元素没有设置宽高，导致父元素塌陷，后续标准文档流的内容叠加在浮动元素的下边。

将div2的两个子元素设置为float：left，并且div2不设置宽高。


标准文档流	div1	div21	div22	div3	div4

发现div2的两个字元素脱离了文档流，没有将父元素div2撑起，导致div2塌陷，标准文档流中的后续元素取代div2的位置，显示在div2两个子元素的下一层。

		div21	div22
标准文档流	div1	div3	div4

1.使用clear:left| right | both

clear:both;

在要清除浮动的元素后面添加一个标签。

在标准文档流中添加了一个空白的盒子。

2.给父盒子设置overflow:hidden

如果父盒子中有定位的元素，一般不推荐使用该种方式清除浮动。影响其他CSS效果。

3.使用伪元素清除浮动（推荐）

:after