什么是浮动、为什么要清除浮动

最新推荐文章于 2025-06-12 15:01:55 发布

忘于江湖-CJF

最新推荐文章于 2025-06-12 15:01:55 发布

阅读量1.1w

点赞数 9

CC 4.0 BY-SA版权

分类专栏： CSS HTML 文章标签：浮动 float 清除浮动 css 清除浮动方法

本文链接：https://blog.youkuaiyun.com/u013356907/article/details/82777148

HTML 同时被 2 个专栏收录

2 篇文章

订阅专栏

CSS

1 篇文章

订阅专栏

本文详细解析了CSS中浮动的概念及其实现原理，并介绍了如何解决因浮动造成的高度塌陷问题。

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

什么是浮动

在了解什么是浮动之前我们先了解一下html元素在普通流排列方式。在普通流中，元素是按照它在 HTML 中的出现的先后顺序自上而下依次排列布局的，在排列过程中所有的行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为一整行。如果没有特殊样式指定，所有元素默认都是按照普通流方式排列布局，即普通流中元素的位置由该元素在 HTML 文档中的位置决定的。

浮动使元素脱离文档普通流，漂浮在普通流之上的。浮动元素依然按照其在普通流的位置上出现，然后尽可能的根据设置的浮动方向向左或者向右浮动，直到浮动元素的外边缘遇到包含框或者另一个浮动元素为止，且允许文本和内联元素环绕它。浮动会产生块级框（相当于设置了display:block），而不管该元素本身是什么。
在这里插入图片描述

就如上图的显示的div1，div2，div3就是按照普通流排列布局方式呈现的，而后面的div4，div5，div6中的div5的布局方式就不一样了，因为我给div5设置了向左浮动。此时div5脱离普通流，漂浮在普通流之上，所以导致原来div5在普通流中的位置空了出来，div6自动补上去（普通流（div6）表现的和浮动元素不存在一样）。

		<style>
		.div{margin:auto;
			border: 2px solid red;
			height: 50px;
			width: 70%;
			}
			hr{margin: 30px auto;}
			.div5{float: left;}
		</style>
		<body>
		<hr />
		<div class="div"> <h2>div1</h2></div>
		<div class="div div2"><h2>div2</h2></div>
		<div class="div"><h2>div3</h2></div>
		<hr />
		<div class="div"> <h2>div4</h2></div>
		<div class="div div5"><h2>div5</h2></div>
		<div class="div"> <h2>div6</h2></div>
	</body>

为什么清除浮动

浮动导致元素已不在普通流中，所以在排列布局的时候文档中的普通流表现的和浮动元素不存在一样，当浮动元素的高度超出包含框的时候，会出现包含框不会自动撑高来包裹浮动元素，即所谓的“高度塌陷”。如下图所示
在这里插入图片描述

<style>
		#container{
				border: 2px solid red;
				margin: 30px auto;
				width: 90%;
			}
	.float1{
				height: 100px;
				background: green;
				width: 200px;
				float: left;
			}
</style>
<body>
	<div id="container">
		<h1>包含框</h1>
		<div class="float1"><h1>float left</h1></div>
	</div>
</body>