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

最新推荐文章于 2022-08-25 16:49:49 发布

_临渔_

最新推荐文章于 2022-08-25 16:49:49 发布

阅读量658

点赞数

分类专栏： Java

本文链接：https://blog.csdn.net/LED_of_Java/article/details/98871186

版权

Java 专栏收录该内容

118 篇文章 0 订阅

订阅专栏

额外标签法

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

_临渔_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【web前端(十六)】html_盒模型——消除浮动（脱标）

额外标签法<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>消除浮动1(脱标)</title> <style> .a1, .a2{ float: left; } .al{ wid...
复制链接

扫一扫