清除浮動的六大方法

時間 2019-11-07

標籤清除浮動六大方法简体版

原文原文鏈接

清除浮動的六大方法

一.父元素固定高度

說明:css

這種方法適用於父元素的內容的高度固定的狀況,若是父元素的內容有可能會變化則不適合使用此種方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>清除浮動的六種方法</title>
		<style> *{ padding: 0; margin: 0; } .wrap{ height: 300px;/*固定父元素的高度*/ } .box1,.box2{ width: 400px; height: 300px; float: left; } .box1{ background-color: yellow; } .box2{ background-color: deepskyblue; } .box3{ width: 900px; height: 200px; background-color: deeppink; } </style>
	</head>
	<body>
		<div class="wrap">
			<div class="box1"></div>
			<div class="box2"></div>
		</div>
		<div class="box3"></div>
	</body>
</html>

複製代碼

二.clear:both

說明:html

clear屬性表示清除浮動元素對本身的影響bash
clear屬性有三個值,left,right,both,left表示清除本元素左邊浮動元素本身的影響,right表示清除本元素右邊浮動元素對本身的影響,both表示清除兩邊浮動元素對本身的影響,通常咱們使用both學習
該屬性通常寫在公共類中,使用時給須要的元素添加該類名便可ui
該方法有個致命的缺點就是:margin屬性部分失效spa

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>清除浮動的六種方法</title>
		<style> *{ padding: 0; margin: 0; } .box1,.box2{ width: 400px; height: 300px; float: left; } .box1{ background-color: yellow; } .box2{ background-color: deepskyblue; } .box3{ width: 900px; height: 200px; clear: both;/*清除浮動*/ background-color: deeppink; } </style>
	</head>
	<body>
		<div class="wrap">
			<div class="box1"></div>
			<div class="box2"></div>
		</div>
		<div class="box3"></div>
	</body>
</html>

複製代碼

三.隔牆法

clear:both直接加在想要清除影響的元素上會形成該元素margin值部分失效,可使用隔牆法firefox

外隔牆code

說明:htm

定義一個空的盒子,該盒子樣式中加上clear:both
將該空盒子放到想要清除影響的元素與浮動元素所在的父元素之間
給該盒子添加樣式時考慮公共類思想

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>清除浮動的六種方法</title>
		<style> *{ padding: 0; margin: 0; } .box1,.box2{ width: 400px; height: 300px; float: left; } .box1{ background-color: yellow; } .box2{ background-color: deepskyblue; } .box3{ width: 900px; height: 200px; background-color: deeppink; } /*公共類*/ .clearfix{ clear: both; } .h20{ height: 20px; } </style>
	</head>
	<body>
		<div class="wrap">
			<div class="box1"></div>
			<div class="box2"></div>
		</div>
		<div class="clearfix h20"></div>
		<div class="box3"></div>
	</body>
</html>

複製代碼

內隔牆string

說明:

定義一個空的盒子,該盒子樣式中加上clear:both
將該空盒子放到浮動元素的父元素裏面
給該盒子添加樣式時考慮公共類思想

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>清除浮動的六種方法</title>
		<style> *{ padding: 0; margin: 0; } .box1,.box2{ width: 400px; height: 300px; float: left; } .box1{ background-color: yellow; } .box2{ background-color: deepskyblue; } .box3{ width: 900px; height: 200px; background-color: deeppink; } /*公共類*/ .clearfix{ clear: both; } .h20{ height: 20px; } </style>
	</head>
	<body>
		<div class="wrap">
			<div class="box1"></div>
			<div class="box2"></div>
			<div class="clearfix h20"></div>
		</div>
		<div class="box3"></div>
	</body>
</html>

複製代碼

四. overflow:hidden

說明:

這是一種偏方法,原理暫時不清楚
給浮動元素的父元素添加屬性overflow:hidden
此方法不兼容IE,要作兼容處理
缺點:內容增多時候容易形成不會自動換行致使內容被隱藏掉，沒法顯示須要溢出的元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>清除浮動的六種方法</title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			.wrap{
				overflow:hidden;
				_zoom:1;/*兼容ie6*/
			}
			.box1,.box2{
				width: 400px;
				height: 300px;
				float: left;
			}
			.box1{
				background-color: yellow;
			}
			.box2{
				background-color: deepskyblue;
			}
			.box3{
				width: 900px;
				height: 200px;
				background-color: deeppink;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="box1"></div>
			<div class="box2"></div>
		</div>
		<div class="box3"></div>
	</body>
</html>

複製代碼

五:使用after僞元素清除浮動

說明:

:after 方式爲空元素的升級版，好處是不用單獨加標籤了
對浮動元素父元素處理
缺點：因爲IE6-7不支持:after，使用 zoom:1觸發 hasLayout。
注意： content:"." 裏面儘可能跟一個小點，或者其餘，儘可能不要爲空，不然再firefox 7.0前的版本會有生成空格。
大廠經常使用,值得學習

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>清除浮動的六種方法</title>
		<style> *{ padding: 0; margin: 0; } .clearfix:after{/*建議以公共類的形式出現*/ content: '.'; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {*zoom: 1;}   /* IE六、7 專有 */ .box1,.box2{ width: 400px; height: 300px; float: left; } .box1{ background-color: yellow; } .box2{ background-color: deepskyblue; } .box3{ width: 900px; height: 200px; background-color: deeppink; } </style>
	</head>
	<body>
		<div class="wrap clearfix">
			<div class="box1"></div>
			<div class="box2"></div>
		</div>
		<div class="box3 "></div>
	</body>
</html>

複製代碼

六:使用before和after雙僞元素清除浮動

說明:

對浮動元素父元素處理

優勢：代碼更簡潔
缺點：因爲IE6-7不支持:after，使用 zoom:1觸發 hasLayout。
大廠經常使用,值得學習

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>清除浮動的六種方法</title>
		<style> *{ padding: 0; margin: 0; } .clearfix:before,.clearfix:after { content:""; display:table; } .clearfix:after { clear:both; } .clearfix { *zoom:1;/*ie6-7*/ } .box1,.box2{ width: 400px; height: 300px; float: left; } .box1{ background-color: yellow; } .box2{ background-color: deepskyblue; } .box3{ width: 900px; height: 200px; background-color: deeppink; } </style>
	</head>
	<body>
		<div class="wrap clearfix">
			<div class="box1"></div>
			<div class="box2"></div>
		</div>
		<div class="box3 "></div>
	</body>
</html>

複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。