清除浮动的方法

最新推荐文章于 2022-09-15 15:42:56 发布

dilidili131

最新推荐文章于 2022-09-15 15:42:56 发布

阅读量97

点赞数

分类专栏：前端html / css 文章标签： css html css3

本文链接：https://blog.csdn.net/qq_40619550/article/details/118522207

版权

前端html / css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.father{
			width: 300px;
			background-color: hotpink;
		}
		.son1{
			width: 100px;
			height: 50px;
			background-color: purple;
			float: left;
		}
		.son2{
			width: 150px;
			height: 50px;
			background-color: blue;	
			float: left;
		}
		.uncle{
			width: 300px;
			height: 200px;
			background-color: dimgray;
		}

			
	</style>
</head>
<body>
	<div class="father">
		<div class="son1"></div>
		<div class="son2"></div>
	</div>
	<div class="uncle"></div>
</body>
</html>

网页样式
在这里插入图片描述

额外标签法

是W3C推荐的做法，通过在浮动元素末尾添加一个空的标签例如

<div style="clear : both"></div>

或者其他其他标签br等均可。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.father{
			width: 300px;
			background-color: hotpink;
		}
		.son1{
			width: 100px;
			height: 50px;
			background-color: purple;
			float: left;
		}
		.son2{
			width: 150px;
			height: 50px;
			background-color: blue;	
			float: left;
		}
		.uncle{
			width: 300px;
			height: 200px;
			background-color: dimgray;
		}
		.clear{
			clear: both;
		}
			
	</style>
</head>
<body>
	<div class="father">
		<div class="son1"></div>
		<div class="son2"></div>
		<div class="clear"></div>
	</div>
	<div class="uncle"></div>
</body>
</html>

在这里插入图片描述

父级添加overflow属性方法

可以给通过触发BFC的方式，实现清除浮动的效果。
可以给父级添加overflow为 hidden | auto | scroll 均可

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.father{
			width: 300px;
			background-color: hotpink;
			overflow: hidden;
		}
		.son1{
			width: 100px;
			height: 50px;
			background-color: purple;
			float: left;
		}
		.son2{
			width: 150px;
			height: 50px;
			background-color: blue;	
			float: left;
		}
		.uncle{
			width: 300px;
			height: 200px;
			background-color: dimgray;
		}
			
	</style>
</head>
<body>
	<div class="father">
		<div class="son1"></div>
		<div class="son2"></div>
		<div class="clear"></div>
	</div>
	<div class="uncle"></div>
</body>
</html>

使用after伪元素清除浮动

使用方法

clearfix：after{content : “.”;display:block ; height : 0 ; clear : both ; visibility : hidden}
.clearfic { *zoom : 1}

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.clearfix:after{
			content: ".";
			height: 0;
			display: block;
			clear: both;
			visibility: hidden;
		}
		.clearfix{
			*zoom: 1;
		}
		.father{
			width: 300px;
			background-color: hotpink;
			overflow: hidden;
		}
		.son1{
			width: 100px;
			height: 50px;
			background-color: purple;
			float: left;
		}
		.son2{
			width: 150px;
			height: 50px;
			background-color: blue;	
			float: left;
		}
		.uncle{
			width: 300px;
			height: 200px;
			background-color: dimgray;
		}
			
	</style>
</head>
<body>
	<div class="father clearfix">
		<div class="son1"></div>
		<div class="son2"></div>
	</div>
	<div class="uncle"></div>
</body>
</html>

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

使用方法

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

dilidili131

关注

0
点赞
踩
0

收藏

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

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .father{ width: 300px; background-color: hotpink; } .son1{ width:
复制链接

扫一扫

专栏目录