清除浮動的六大方法

清除浮動的六大方法

一.父元素固定高度

說明: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>

複製代碼
相關文章
相關標籤/搜索