前端学习之清除浮动（clear:both/overflow:hidden）

最新推荐文章于 2023-05-17 19:41:47 发布

Endless Daydream233

最新推荐文章于 2023-05-17 19:41:47 发布

阅读量1k

点赞数 2

分类专栏：前端学习基础记录文章标签： css html

本文链接：https://blog.csdn.net/gua222/article/details/105496943

版权

前端学习基础记录专栏收录该内容

57 篇文章 7 订阅

订阅专栏

为什么要清除浮动？

浮动本质是用来做一些文字混排效果的，但是被我们拿来做布局，则会有很多的问题出现，但是，你不能说浮动不好。
由于浮动元素不再占用原文档流的位置（脱标），所以它会对后面的元素排版产生影响。为了解决这个问题，此时就需要在该元素中清除浮动。
准确的说，并不是清除浮动，而是清除浮动后造成的影响。
如果浮动一开始就是一个美丽的错误，那么请用正确的方式拯救它~

清除浮动的本质

清除浮动主要是为了解决父级元素因为子级元素浮动引起内部高度为0的问题。

正常标准流的盒子
标准流盒子
子盒子浮动之后（子盒子脱标，父盒子没有高度就为0，即不会撑开盒子，下面的盒子就会移到到如图所示的位置）

清除浮动的方法

其实本质叫做闭合浮动更好一些。
清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让它们出来影响其他元素。
在css中，clear属性用于清除浮动，其基本语法如下：

选择器{ clear:属性值; }

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

方法一：额外标签法（浮动元素的后面添加）

w3c推荐的做法是通过在浮动元素末尾添加一个空的标签，例如<div style=“clear: both;”></div>，或者其他标签br等亦可。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.father{
		/*float: left;*/
		border: 1px solid pink;
		width: 300px;
		margin:0 auto;
	}
	.big{
		float: left;
		height: 100px;
		width: 100px;
		background-color: yellow;
	}
	.small{
		float: left;
		height: 80px;
		width: 80px;
		background-color: green;
	}
	.footer{
		margin:0 auto;
		width: 400px;
		height: 100px;
		background-color: skyblue;
	}
	.clear{
		clear: both; /* 如果清除了浮动，father会自动检测children的高度，以最高的为准 */
	}
	</style>
</head>
<body>
	<div class="father">
		<div class="big">子盒子</div>
		<div class="small">子盒子</div>
		<div class="clear"></div> <!-- 最后一个浮动标签的后面。新添加一个标签 清除浮动 -->
	</div>
	<div class="footer">
	</div>
	
</body>
</html>

优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化较差。

方法二：父级添加overflow属性方法

可以通过触发BFC的方式，实现清除浮动的效果。

可以给父级添加：overflow为 hidden丨auto丨scroll 都可以实现

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.father{
		/*float: left;*/
		border: 1px solid pink;
		width: 300px;
		margin:0 auto;
		overflow: hidden;
		/* overflow: scroll;
		overflow: auto; */
		/* 不是所有的浮动都需要清除，谁影响布局清除谁 */
	}
	.big{
		float: left;
		height: 100px;
		width: 100px;
		background-color: yellow;
	}
	.small{
		float: left;
		height: 80px;
		width: 80px;
		background-color: green;
	}
	.footer{
		margin:0 auto;
		width: 400px;
		height: 100px;
		background-color: skyblue;
	}
	/*.clear{
		clear: both;*/
		 /* 如果清除了浮动，father会自动检测children的高度，以最高的为准 */
	/* } */
	</style>
</head>
<body>
	<div class="father">
		<div class="big">子盒子</div>
		<div class="small">子盒子</div>
		<!-- <div class="clear"></div> --> <!-- 最后一个浮动标签的后面。新添加一个标签 清除浮动 -->
	</div>
	<div class="footer">
	</div>
	
</body>
</html>

优点：代码简洁
缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

方法三：使用after伪元素清除浮动

:after 方式为空元素的升级版，好处是不用再单独加标签了
使用方法：

.clearfix:after{ content: “”;display: block;height: 0;clear: both;visibility: hidden;}正常浏览器清除浮动
.clearfix{*zoom:1;} zoom:1 ie6清除浮动的方式 * 表示ie7以下的版本可以识别

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.clearfix:after{ /* 正常浏览器清除浮动 */
		content: "";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	}
	.clearfix{
		*zoom:1; 
		/* zoom:1 ie6清除浮动的方式 * 表示ie7以下的版本可以识别 */
	}
	.father{
		/*float: left;*/
		border: 1px solid pink;
		width: 300px;
		margin:0 auto;
		/*overflow: hidden;*/
		/* overflow: scroll;
		overflow: auto; */
		/* 不是所有的浮动都需要清除，谁影响布局清除谁 */
	}
	.big{
		float: left;
		height: 100px;
		width: 100px;
		background-color: yellow;
	}
	.small{
		float: left;
		height: 80px;
		width: 80px;
		background-color: green;
	}
	.footer{
		margin:0 auto;
		width: 400px;
		height: 100px;
		background-color: skyblue;
	}
	/*.clear{
		clear: both;*/
		 /* 如果清除了浮动，father会自动检测children的高度，以最高的为准 */
	/* } */
	</style>
</head>
<body>
	<div class="father clearfix">
		<div class="big">子盒子</div>
		<div class="small">子盒子</div>
		<!-- <div class="clear"></div> --> <!-- 最后一个浮动标签的后面。新添加一个标签 清除浮动 -->
	</div>
	<div class="footer">
	</div>
	
</body>
</html>

优点：符合闭合浮动思想，结构语义化正确
缺点：由于IE6-7不支持:after,使用zoom:1触发haslayout
代表网站：百度、淘宝、网易等。
注意：content:"" 尽量不带点

方法四：使用before和after双伪元素清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.clearfix:before,.clearfix:after {
  		content: "";
  		display:table;
	}
	.clearfix:after {
		clear: both;
	}
	/* .clearfix:after{  */
		/* 正常浏览器清除浮动 */
	/* 	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
		} */
	.clearfix{
		*zoom:1; 
		/* zoom:1 ie6清除浮动的方式 * 表示ie7以下的版本可以识别 */
	}
	.father{
		/*float: left;*/
		border: 1px solid pink;
		width: 300px;
		margin:0 auto;
		/*overflow: hidden;*/
		/* overflow: scroll;
		overflow: auto; */
		/* 不是所有的浮动都需要清除，谁影响布局清除谁 */
	}
	.big{
		float: left;
		height: 100px;
		width: 100px;
		background-color: yellow;
	}
	.small{
		float: left;
		height: 80px;
		width: 80px;
		background-color: green;
	}
	.footer{
		margin:0 auto;
		width: 400px;
		height: 100px;
		background-color: skyblue;
	}
	/*.clear{
		clear: both;*/
		 /* 如果清除了浮动，father会自动检测children的高度，以最高的为准 */
	/* } */
	</style>
</head>
<body>
	<div class="father clearfix">
		<div class="big">子盒子</div>
		<div class="small">子盒子</div>
		<!-- <div class="clear"></div> --> <!-- 最后一个浮动标签的后面。新添加一个标签 清除浮动 -->
	</div>
	<div class="footer">
	</div>
	
</body>
</html>

优点：代码更简洁
缺点：由于IE6-7不支持:after,使用zoom:1触发haslayout
代表网站：小米

Endless Daydream233

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
前端学习之清除浮动（clear:both/overflow:hidden）

为什么要清除浮动？浮动本质是用来做一些文字混排效果的，但是被我们拿来做布局，则会有很多的问题出现，但是，你不能说浮动不好。由于浮动元素不再占用原文档流的位置（脱标），所以它会对后面的元素排版产生影响。为了解决这个问题，此时就需要在该元素中清除浮动。准确的说，并不是清除浮动，而是清除浮动后造成的影响。如果浮动一开始就是一个美丽的错误，那么请用正确的方式拯救它~清除浮动的本质清除浮动主...
复制链接

扫一扫