提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

【web前端(十六)】html_盒模型——消除浮动（脱标）

WebHTML前端 模型 十六 浮动 消除
2023-09-11 14:20:37 时间

额外标签法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>消除浮动1(脱标)</title>
		<style>
			.a1,
			.a2{
				float: left;
			}
			
			.al{
				width: 100px;
				height: 100px;
				background-color: #00008B;
			}
			
			.a2{
				width: 100px;
				height: 100px;
				background-color: #008000;
			}
			
			.a3{
				width: 300px;
				height: 100px;
				background-color: #8A2BE2;
			}
			
		</style>
	</head>
	<body>
		<!--额外标签法-->
		<!--相比于加额外块，
			额外标签法的代码比较清晰。
		-->
		<div class="a1"></div>
		<div class="a2"></div>
		<div style="clear: both;"></div>
		<div class="a3"></div>
	</body>
</html>

 

 

 

加额外块法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>消除浮动2(脱标)</title>
		<style>
			.a1,
			.a2{
				float: left;
			}
			
			.al{
				width: 100px;
				height: 100px;
				background-color: #00008B;
			}
			
			.a2{
				width: 100px;
				height: 100px;
				background-color: #008000;
			}
			
			.a3{
				width: 300px;
				height: 100px;
				background-color: #8A2BE2;
			}
			
		</style>
	</head>
	<!--
		此处，我们里边是脱标的，		
		但是外边没有脱标。
		我们这里不设置，
		还是不管用的。
		我们在这里可以防止里面的设置溢出到外边。-->
	
	<body>
		<div style="overflow: hidden;">
			<!--加额外块法-->
		<div class="a1"></div>
		<div class="a2"></div>
		</div>
		
		<div class="a3"></div>
	</body>
</html>

 

 

 

伪元素法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>消除浮动3(脱标)</title>
		<style>
			.a1,
			.a2{
				float: left;
			}
			
			.al{
				width: 100px;
				height: 100px;
				background-color: #00008B;
			}
			
			.a2{
				width: 100px;
				height: 100px;
				background-color: #008000;
			}
			
			.a3{
				width: 300px;
				height: 100px;
				background-color: #8A2BE2;
			}
			
			
			/**
			 * 伪元素法：
			 * 需要增加额外的标签
			 */
			
			.clearfix:after{
				/*此处表示应用该样式的后边内容为空*/
				content: "";
				display: block;
				height: 0;
				/*清楚左右浮动*/
				clear: both;
				/*隐藏*/
				visibility: hidden;
			}
			
			.clearfix
			/*是用来放大缩小的，
			 用来启动浏览器清除浮动*/
				*zoom:1;
				/*IE6、7专有*/
			}
		</style>
	</head>
	<!--
		此处，我们里边是脱标的，		
		但是外边没有脱标。
		我们这里不设置，
		还是不管用的。
		我们在这里可以防止里面的设置溢出到外边。-->
	
	<body>
		
		<!--伪元素法：
			内容增多的时候，
			容易造成不会自动换行，
			导致内容被隐藏掉，
			无法显示需要溢出的内容。
		-->
		<div class="clearfix">
			
			<div class="a1"></div>
		    <div class="a2"></div>
		</div>
		
		<div class="a3"></div>
	</body>
</html>

 

 

 

双伪元素法（比为元素代码简洁）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>消除浮动4(脱标)</title>
		<style>
			.a1,
			.a2{
				float: left;
			}
			
			.al{
				width: 100px;
				height: 100px;
				background-color: #00008B;
			}
			
			.a2{
				width: 100px;
				height: 100px;
				background-color: #008000;
			}
			
			.a3{
				width: 300px;
				height: 100px;
				background-color: #8A2BE2;
			}
			
			
			/**
			 * 双伪元素法：
			 * 需要增加额外的标签,
			 * 比伪元素法简洁
			 */
			.classfix:before,
			.clearfix:after{
				/*此处表示应用该样式的后边内容为空*/
				content: "";
				display: table;
				/*这句话可以发出BFC BFC可以清除浮动*/
			}
			
			.clearfix:after{
				clear:both;
			}
			.clearfix
			/*是用来放大缩小的，
			 用来启动浏览器清除浮动*/
				*zoom:1;
				/*IE6、7专有*/
			}
		</style>
	</head>
	<!--
		此处，我们里边是脱标的，		
		但是外边没有脱标。
		我们这里不设置，
		还是不管用的。
		我们在这里可以防止里面的设置溢出到外边。-->
	
	<body>
		
		<!--伪元素法：
			内容增多的时候，
			容易造成不会自动换行，
			导致内容被隐藏掉，
			无法显示需要溢出的内容。
		-->
		<div class="clearfix">
			
			<div class="a1"></div>
		    <div class="a2"></div>
		</div>
		
		<div class="a3"></div>
	</body>
</html>

 

 

相关文章