css 浮动清除的几种方式

谁践踏了优雅 2022-02-22 02:52 264阅读 0赞

# 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>

## 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>