CSS 清除浮动

最新推荐文章于 2024-04-29 16:58:49 发布

_wjl_

最新推荐文章于 2024-04-29 16:58:49 发布

阅读量943

点赞数 1

分类专栏： web前端

web前端专栏收录该内容

50 篇文章 2 订阅

订阅专栏

为什么要清除浮动

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

清除浮动本质

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>为什么清除浮动</title>
	<style>
	.father {
		border: 1px solid red;
		/* father没有高度 son都是浮动 则xiaomi会在被覆盖 在下面 */
		/*height: 100px;  */
	}
	.damao {
		width: 100px;
		height: 100px;
		background-color: pink;
		float: left;
	}
	.ermao {
		width: 150px;
		height: 150px;
		background-color: purple;
		float: left;
	}
	.xiaomi {
		width: 300px;
		height: 120px;
		background-color: black;
	}
	</style>
</head>
<body>
	<div class="father">
		<div class="damao">11</div>
		<div class="ermao">12</div>
	</div>
	<div class="xiaomi"></div>
</body>
</html>

在这里插入图片描述

清除浮动的方法

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

选择器{clear:属性值;}

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

额外标签法

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

优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化较差。我只能说，w3c你推荐的方法我不接受，你不值得拥有。。。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>清除浮动-额外标签法</title>
	<style>
	.father {
		border: 1px solid red;
		/* father没有高度 son都是浮动 则xiaomi会在被覆盖 在下面 */
		/*height: 100px;  */
		
	}
	.damao {
		width: 100px;
		height: 100px;
		background-color: pink;
		float: left;
	}
	.ermao {
		width: 150px;
		height: 150px;
		background-color: purple;
		float: left;
	}

	.xiaomi {
		width: 300px;
		height: 120px;
		background-color: black;
	}
	.clear {
		clear: both; /* 清除浮动影响 */
	}
	</style>
</head>
<body>
	<div class="father">
		<div class="damao">11</div>
		<div class="ermao">12</div>
		<div class="clear"></div>
	</div>
	<div class="xiaomi"></div>
</body>
</html>

在这里插入图片描述

父级添加overflow属性方法

可以通过触发BFC的方式，可以实现清除浮动效果。（BFC后面讲解）

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

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>清除浮动-父级添加overflow属性方法</title>
	<style>
	.father {
		border: 1px solid red;
		overflow: hidden;  /* 触发BFC BFC可以清除浮动 这是解决方案 */
	}
	.damao {
		width: 100px;
		height: 100px;
		background-color: pink;
		float: left;
	}
	.ermao {
		width: 150px;
		height: 150px;
		background-color: purple;
		float: left;
	}

	.xiaomi {
		width: 300px;
		height: 120px;
		background-color: black;
	}
	
	</style>
</head>
<body>
	<div class="father">
		<div class="damao">11</div>
		<div class="ermao">12</div>
	</div>
	<div class="xiaomi"></div>
</body>
</html>

在这里插入图片描述

使用after伪元素清除浮动

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

 .clearfix:after {  content: "."; display: block; height: 0; clear: both; visibility: hidden;  }   
 .clearfix {*zoom: 1;}   /* IE6、7 专有 */

优点：符合闭合浮动思想结构语义化正确
缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
代表网站：百度、淘宝网、网易等
注意： content:”.” 里面尽量跟一个小点，或者其他，尽量不要为空，否则再firefox 7.0前的版本会有生成空格。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>使用after伪元素清除浮动</title>
	<style>
	.box1 {
		width: 600px;
		background-color: gray;
	}
	.box2 {
		width: 600px;
		height: 240px;
		background-color: purple;
	}
	.son1 {
		width: 150px;
		height: 100px;
		background-color: skyblue;
		float: left;
	}
	.son2 {
		width: 300px;
		height: 100px;
		background-color: hotpink;
		float: left;
	}
	p:after {
		content:"456";
	}
	.clearfix:after{
		content: "."; /* 内容为小点 尽量加不要空 否则就版本浏览器 有空隙 */
		display: block; /* 转换为块级元素 */
		height: 0;
		visibility: hidden; /* 隐藏盒子 */
		clear: both;
	}
	.clearfix {
		*zoom:1;
		 /*  *代表ie6 7 能识别的特殊符号 带有这个*的属性只有ie6 7才执行
             zoom 及时ie6 7清除浮动的方法
		 */
	}
	</style>
</head>
<body>
    <p>123</p>
	<div class="box1 clearfix">
		<div class="son1"></div>
		<div class="son2"></div>
	</div>
	<div class="box2"></div>
</body>
</html>

在这里插入图片描述

使用before和after双伪元素清除浮动

.clearfix:before,.clearfix:after { 
  content:".";
  display:table;
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

优点：代码更简洁

缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

代表网站：小米、腾讯等

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>使用before和after双伪元素清除浮动</title>
	<style>
	.box1 {
		width: 600px;
		background-color: gray;
	}
	.box2 {
		width: 600px;
		height: 240px;
		background-color: purple;
	}
	.son1 {
		width: 150px;
		height: 100px;
		background-color: skyblue;
		float: left;
	}
	.son2 {
		width: 300px;
		height: 100px;
		background-color: hotpink;
		float: left;
	}
	p:after {
		content:"456";
	}	
	.clearfix:before,
	.clearfix:after {
		content: "";
		display: table;
	}
	.clearfix:after {
		clear: both;
	}
	.clearfix {
		*zoom: 1;
	}
	</style>
</head>
<!DOCTYPE html>
<html lang="en">
<body>
    <p>123</p>
	<div class="box1 clearfix">
		<div class="son1"></div>
		<div class="son2"></div>
	</div>
	<div class="box2"></div>
</body>
</html>

在这里插入图片描述

_wjl_

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS 清除浮动

为什么要清除浮动我们前面说过，浮动本质是用来做一些文字混排效果的，但是被我们拿来做布局用，则会有很多的问题出现，但是，你不能说浮动不好。由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。如果浮动一开始就是一个美丽的错误，那么请用正确的方法挽救它。清除浮动本质清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的...
复制链接

扫一扫