css浮动全解，float: left； clear:both 清除浮动方法 5个

最新推荐文章于 2025-03-22 10:05:13 发布

luanmabug

最新推荐文章于 2025-03-22 10:05:13 发布

阅读量1.4k

点赞数 1

分类专栏： HTML5+CSS 文章标签： github css

本文链接：https://blog.csdn.net/yangyangdt/article/details/121652739

版权

HTML5+CSS 专栏收录该内容

7 篇文章

订阅专栏

本文深入探讨了CSS浮动的概念，包括浮动如何影响元素布局，以及为何需要清除浮动。文章列举了五种清除浮动的方法：1) 给父级设置高度；2) 使用`clear: both`；3) 添加额外的清除标签；4) 利用伪元素`:after`；5) 设置`overflow: hidden`。每种方法的优缺点也进行了详细阐述。

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

css浮动

一、什么是浮动

浮动怎么理解？

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动会脱离文档流，相当于此框像图层一样向外飘起来了，原本它的位置会被下方的内容顶上，导致下方的内容和浮动的重合一部分。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

浮动的特点:

1.脱离文档流，浮动不占位。

2.转化为内联块，默认排列成一行，遇到边界自动换行。

3.层级高于其他元素。

图源：w3cschool

二、元素如何浮动

浮动
float: left;
float:right;
float:none;
清除浮动：
clear：left;
clear:right;
clear:both;

三、清除浮动方法

为什么要清除浮动？

当元素在父盒子中时，默认情况下，父div的高度是auto,它可以被子div任意的撑大。如果没有给父高度，那么元素内容高度会撑起父盒子来，那么，当元素浮动起来，相当于往外脱离了父盒子，此时父盒子空间直接塌缩为一条顶部的线，高度为0。父盒子下面的内容也会顶上来，为了避免这种情况，要清除子元素浮动带来的影响。

由上述，c没添加margin-top的话，顶端会与浮动元素的下边缘重合。

1.给父级加上高度

优点：简单粗暴有效。

缺点：后面代码需要不断的改这个高度。

<style type="text/css">
		.father{
			height: 200px;
			border: 1px solid #000;
		}	
		
		  .a{
		 	border: 5px solid green;
		 	margin-top: 10px;
		 	width: 100px;
		 	height: 40px;
		 	float: left;
		 }
		 .b{
		 	border: 5px solid red;
		 	width: 100px;
		 	height: 40px;
		 	float: left;	
		 	}
	</style>
	
	<div class="father">
			father
			<div class="a">a</div>
		    <div class="b">b</div>
		</div>    
	<div class="c">c  下方内容</div>

2.clear：both；

谁受到浮动的副作用影响了，给哪个标签添加清除浮动，比如c受到a和b的浮动影响，上浮了，那么给c一个clear：both；

clear本质是,浏览器在被影响元素(也就是下方的c )的顶部添加了足够多的外边距, 即给c添加了margin-top,使原本与a顶端重合的c下降高度达到与上面拉开距离。

缺点：margin-top失效，margin其他方位不受影响。

 .a{
 border: 5px solid green;
 width: 100px;
 height: 40px;
 float: left;
 }
 .b{
 border: 5px solid red;
 width: 100px;
 height: 40px;
 float: left;	
 }

.c{                         
border: 5px solid blue;
margin-top: 20px;               
height: 80px;
width: 100px;
clear: both;  /*清除浮动*/

}

a,b,浮动后，父盒子仅剩内容“father"在撑着, 给c添加margin-top: 20px; 可见并未显示出20px的外距离。

而是下降了部分距离,所以margin-top已失效。

3.添加额外清除标签

在c的上方，浮动外盒子的下方，添加专门清除浮动的标签。给他一个clear：both;

缺点：多添加了一个元素。

我是负责清除下方内容c的上浮的

.clearfix{                                            
		 	border: 1px solid yellow;
		 	clear: both;
		 	/*height: 100px;*/           
	 }

<div class="father">
    <div class="a">a</div>
    <div class="b">b</div>
</div>
<div class="clearfix"><!--我是负责清除下方内容c的上浮的--></div>
<div class="c">c  下方内容</div>

也可以把这个clearfix放在ab下面，父盒子里面。

c 下方内容

这个时候，可以看到，父盒子突然有了高度，其实是clearfix放在浮动元素下面，clearfix有了足够的外边距，父clearfix的margin-top和本身的高度撑起来了（还不理解的跳到2.clear：both）。

父：我终于支棱起来了 ! ! !

4.伪元素：：after

原理：给一个元素添加一个::after则相当于给这个元素添加了子元素, 而且这个子元素会是他的最后一个子。

所以按照方法3，我们完全可以避免新添加一个元素，伪元素大法走起！

应用：给父添加以下代码即可。

缺点：有些浏览器不支持伪元素，把俩冒号改成一个就行。

.father:after{
		    display: block;/*把::after设置成块级元素*/
		    content: "";/*想让伪类起作用, 必须添加这个属性*/
		    clear: both;
		    border: 1px solid #000;
		}
.c{                         
		 	border: 5px solid blue;
		 	margin-top: 20px;               
		    height: 80px;
		    width: 100px; 
		 }
		 
<div class="father">
    <div class="a">a</div>
    <div class="b">b</div>
    <!--<div class="clearfix">我是负责清除下方内容c的上浮的</div>-->
</div>

由上图可见，虽然父没有支棱起来，但此举管用。

5.overflow: hidden;

overflow:hidden;是为了避免子元素溢出的。但当子有浮动效果时，给父添加上，会清除子浮动带给父的影响，相当于子完成浮动后回到了父里面。

给父添加overflow:hidden;为了IE浏览器兼容，可以再加上zoom:1;，然后你就会发现…

.father{
		   overflow: hidden;
		   zoom:1;
		   border: 1px solid #000;
		}

父竟然又双叒叕支棱起来啦！！！