css 浮动清除的几种方式

最新推荐文章于 2022-11-23 20:02:54 发布

落花有意，树无情

最新推荐文章于 2022-11-23 20:02:54 发布

阅读量200

点赞数

CC 4.0 BY-SA版权

文章标签： css html 前端

本文链接：https://blog.youkuaiyun.com/q918922703_1/article/details/89107125

本文深入探讨了CSS浮动清除的多种方法，包括使用伪类、添加空div、定义父级div高度、利用overflow属性、父级div和子div同时浮动、设置父级div为表格属性以及在回车标签中应用clearboth。每种方法都附有实例代码，帮助开发者理解和应用这些技巧。

css浮动清除的几种方式

1.在父级div中定义伪类

此方法的优点适用于大多数浏览器，对于初学者首先理解起来有些困难，通常使用这种方法时需要见一个公共的类来清除浮动以减少css代码的量；

实例如下：

<html>
	<head>
		<meta charset="utf-8">
		<title>父级div定义伪类</title>
		<style type="text/css">
			.div1 {
				background-color: pink;
				border: 1px solid red;
			}

			.div2 {
				background-color: purple;
				border: 1px solid red;
				height: 100px;
				margin-top: 10px;
			}

			.left {
				float: left;
				width: 20%;
				height: 200px;
				background: #DDD;
			}

			.right {
				float: right;
				width: 20%;
				height: 200px;
				background: #DDDDDD;
			}
			/* 清除浮动代码 */
			.clearfloat:after{
				display: block;
				clear: both;
				content: "";
				visibility:hidden;/* 用来规定元素是否可见其值有visbile和hidden */
				height: 0;
			}
			.clearfloat{
				zoom: 1;
			}
		</style>
	</head>
	<body>
		<div class="div1 clearfloat">
			<div class="left">Left</div>
			<div class="right">Right</div>
		</div>
		<div class="div2">
			div2
		</div>
	</body>
</html>

2：添加一个空div清除浮动

让父类能或得子类的高度等属性在父类div外添加一个空div来清除浮动；

实例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>在结尾处添加标签</title>
		<style type="text/css">
				.div1 {
				background-color: pink;
				border: 1px solid red;
			}
			
			.div2 {
				background-color: purple;
				border: 1px solid red;
				height: 100px;
				margin-top: 10px;
			}
			
			.left {
				float: left;
				width: 20%;
				height: 200px;
				background: #DDD;
			}
			
			.right {
				float: right;
				width: 20%;
				height: 200px;
				background: #DDDDDD;
			}
			.clearfloat{
				clear:both;
			}
		</style>
	</head>
	<body>
		<div class="div1">
			<div class="left">left</div>
			<div class="right">right</div>
		</div>
		<div class="clearfloat">
		</div>
		<div class="div2">
			div2
		</div>
	</body>
</html>

3.在父级div中定义高度属性

此方法手动定义了父级div中的高度，当父级div的高度和子类的高度不一样时容易产生问题；当高度固定时采用这种方法挺好；

实例如下：

<html>
	<head>
		<meta charset="utf-8">
		<title>父级div定义height</title>
		<style type="text/css">
				.div1 {
				background-color: pink;
				border: 1px solid red;
				height: 200px;/* 父级定义高度 */
			}
			
			.div2 {
				background-color: purple;
				border: 1px solid red;
				height: 100px;
				margin-top: 10px;
			}
			
			.left {
				float: left;
				width: 20%;
				height: 200px;
				background: #DDD;
			}
			
			.right {
				float: right;
				width: 20%;
				height: 200px;
				background: #DDDDDD;
			}
		</style>
	</head>
	<body>
		<div class="div1 ">
			<div class="left">Left</div>
			<div class="right">Right</div>
		</div>
		<div class="div2">
			div2
		</div>
	</body>
</html>
<!-- 这种方法并没有清除浮动只是在原理看起来像是清除浮动的样式 在实际中left和right其实是浮动的 -->

4.使用overflow来清除浮动

使用overflow时要注意overflow标签的含义其是对于溢出内容的处理方法;

实例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>overflow清除浮动</title>
		<style type="text/css">
			.div1 {
				background-color: pink;
				border: 1px solid red;
				/* 这种方法必须定义width或者zoom */
				width:100%;
				overflow:hidden;/* overflow规定当内容溢出时发生的事情  内容如何处理hidden是不可见的 scroll是滚动的 */
			}
			/* 不能和position一起使用因为多余的会被隐藏 */
			.div2 {
				background-color: purple;
				border: 1px solid red;
				height: 100px;
				margin-top: 10px;
			}
			
			.left {
				float: left;
				width: 20%;
				height: 200px;
				background: #DDD;
			}
			
			.right {
				float: right;
				width: 20%;
				height: 200px;
				background: #DDDDDD;
			}
		</style>
	</head>
	<body>
		<div class="div1">
			<div class="left">Left</div>
			<div class="right">Right</div>
		</div>
		<div class="div2">
			div2
		</div>
	</body>
</html>

5.父级div和子div同时浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>父级div跟着同时浮动</title>
		<style type="text/css">
				.div1 {
				background-color: pink;
				border: 1px solid red;
				float: left;
				width: 100%;
				margin-bottom: 20px;/* 与下一个div分开 不能在下一个div使用margin */
			}
			
			.div2 {
				background-color: purple;
				border: 1px solid red;
				height: 100px;
				margin-top: 10px;
				clear: both;/* 清除与上个div的浮动 */
				
			}
			.left {
				float: left;
				width: 20%;
				height: 200px;
				background: #DDD;
			}
			
			.right {
				float: right;
				width: 20%;
				height: 200px;
				background: #DDDDDD;
				}
		</style>
	</head>
	<body>
		<div class="div1">
			<div class="left">Left</div>
			<div class="right">Right</div>
		</div>
		<div class="div2">
			div2
		</div>
	</body>
</html>

6.将父级div设置为表格属性

实例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>父级div定义displaytable属性</title>
		<style type="text/css">
				.div1 {
				background-color: pink;
				border: 1px solid red;
				display: table;
				width: 100%;
				margin-bottom: 20px;
			}
			
			.div2 {
				background-color: purple;
				border: 1px solid red;
				height: 100px;
				margin-top: 10px;
			}
			
			.left {
				float: left;
				width: 20%;
				height: 200px;
				background: #DDD;
			}
			
			.right {
				float: right;
				width: 20%;
				height: 200px;
				background: #DDDDDD;
			}
		</style>
	</head>
	<body>
		<div class="div1">
			<div class="left">Left</div>
			<div class="right">Right</div>
		</div>
		<div class="div2">
			div2
		</div>
	</body>
</html>

7.clearboth在回车标签中

在父级div最后设置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>clearboth</title>
		<style type="text/css">
			.div1 {
				background-color: pink;
				border: 1px solid red;
				margin-bottom:10px;zoom:1;
			}
			
			.div2 {
				background-color: purple;
				border: 1px solid red;
				height: 100px;
				margin-top: 10px;
			}
			
			.left {
				float: left;
				width: 20%;
				height: 200px;
				background: #DDD;
			}
			
			.right {
				float: right;
				width: 20%;
				height: 200px;
				background: #DDDDDD;
			}
			
			.clearfloat{clear:both;}
		</style>
	</head>
	<body>
		<div class="div1">
			<div class="left">Left</div>
			<div class="right">Right</div>
			<br class="clearfloat"/>
		</div>
		<div class="div2">
			div2
		</div>
	</body>
</html>