CSS清除浮動的四種方法

柏燦發表於2020-10-30
CSS

 

 

前言

浮動能實現網頁排版佈局，但是同樣也會給網頁帶來一定的問題(父盒子高度塌陷)，下面我們就整理一下幾種清楚浮動的方法

 

一、父盒子設定固定高度清除浮動

缺點：使用不靈活，後期不易維護

例：     

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>清除浮動</title>
	<style type="text/css">
		.father{
            /*父盒子設定固定高度*/
			height: 100px;
			border: 1px solid red;
		}
		.child{
			width: 100px;
			height: 100px;
			float: left;
			background-color: green;
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="child">child</div>
	</div>

</body>
</html>

二、內牆法清除浮動

在浮動元素的後面加一個空的塊級元素(通常是div),設定該元素clear:both；屬性。

缺點：結構冗餘

例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>清除浮動</title>
	<style type="text/css">
		.father{
			border: 1px solid red;
		}
		.child{
			width: 100px;
			height: 100px;
			float: left;
			background-color: green;
		}
		.clearfix{
			clear: both;
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="child">child</div>
		<div class="clearfix"></div>
	</div>

</body>
</html>

三、偽元素清除浮動

 

延續內牆法，利用偽元素清除浮動

例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>清除浮動</title>
	<style type="text/css">
		.father{
			border: 1px solid red;
		}
		.child{
			width: 100px;
			height: 100px;
			float: left;
			background-color: green;
		}
		.cleafix:after{
			content:'.';
			display: block;
			clear: both;
			overflow: hidden;
			height: 0;
		}
		
	</style>
</head>
<body>
	<div class="father clearfix">
		<div class="child">child</div>
	</div>

</body>
</html>

四、overflow: hidden

 

overflow: hidden;會形成一個BFC區域，浮動和清除浮動智慧應用到當前BFC區域，

浮動不會影響其它BFC中元素的佈局，而清除浮動只能清除同一BFC中在它前面的元素的浮動

例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>清除浮動</title>
	<style type="text/css">
		.father{
			overflow: hidden;
			border: 1px solid red;
		}
		.child{
			width: 100px;
			height: 100px;
			float: left;
			background-color: green;
		}
		
	</style>
</head>
<body>
	<div class="father">
		<div class="child">child</div>
	</div>

</body>
</html>

 

 

總結

第四種最簡便，根據情況選擇使用第三第四種

相關文章