總結清除浮動的幾種方法

時間 2019-11-30

標籤總結清除浮動幾種方法简体版

原文原文鏈接

不少時候咱們在寫網頁佈局的時候會常常遇到各類問題，而浮動問題就是常見問題之一，因此今天總結一下清除浮動的幾種方法。html

清除浮動是每個前端工程師必須掌握的技能。前端

浮動會使元素對象提高半層，同時會影響到先後標籤的位置，並且一樣的代碼，在各類瀏覽器中顯示效果也有多是不相同的，這樣清除浮動就更難了。清除浮動方法有不少種，但有的方法在瀏覽器兼容性方面還有問題。chrome

方法一：給父集div加上高度

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Examples</title>
	<style>
		.box {background: blue;border: 1px solid black;height:150px;/*解決方案*/}
		.box div {width: 150px;height: 150px;float: left;}
		.box1 {background: pink;}
		.box2 {background: green;}
	</style>
</head>
	<body>
	    <div class="box">
	    	<div class="box1"></div>
	    	<div class="box2"></div>
	    </div>
	</body>
</html>
複製代碼

原理：給父集div加上高度屬性，就能夠解決父集div沒法獲取高度的問題。瀏覽器

優勢：簡單，代碼少。bash

缺點：只適合高度固定佈局，若是須要高度自適應，這種方法就無法作到了前端工程師

建議：不建議使用，若是高度能夠定死的狀況下，方纔能夠使用。佈局

方法二：在浮動元素的同級末尾加空標籤(clear:both)

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Examples</title>
	<style>
		.box {background: blue;border: 1px solid black;}
		.box .box1,.box .box2 {width: 150px;height: 150px;}
		.box1 {background: pink;float: left;}
		.box2 {background: green;float: left;}
		.clear{clear:both;}/* 解決方案 */
	</style>
</head>
	<body>
	    <div class="box">
	    	<div class="box1"></div>
	    	<div class="box2"></div>
			<div class="clear"></div>
	    </div>
	</body>
</html>
複製代碼

原理：在末尾加上空標籤，而且讓它清除左右浮動，這樣父集div就能夠獲取到高度了性能

優勢：簡單，代碼少，全兼容。flex

缺點：影響性能，每次清浮動都有加div，總歸讓人有點不愉快。ui

建議：不建議使用，反正我歷來不用這個方法。

方法三：利用僞類選擇器來清浮動(:after,:before)

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Examples</title>
	<style>
		.box {background: blue;border: 1px solid black;}
		.box .box1,.box .box2 {width: 150px;height: 150px;}
		.box1 {background: pink;float: left;}
		.box2 {background: green;float: left;}
		/* 解決方案 */
		.clearfix:after,.clearfix:before {
			content:"";
			clear:both;
			display:block;
			width:0px;
			height:0px;
			visibility: hidden;
		}
		.clearfix {
			zoom: 1;
		}
	</style>
</head>
	<body>
	    <div class="box clearfix">
	    	<div class="box1"></div>
	    	<div class="box2"></div>
	    </div>
	</body>
</html>
複製代碼

原理：這個方法方法跟第二個方法有點像，只是after,before是用來假裝元素的。

優勢：用法簡單，全兼容。

缺點：這個方法沒有什麼缺點

建議：強烈建議使用此方法！！！

方法四：給浮動的父親加上overflow

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Examples</title>
	<style>
	    /* 或者使用overflow: auto */
		.box {background: blue;border: 1px solid black;overflow: hidden;}
		.box .box1,.box .box2 {width: 150px;height: 150px;}
		.box1 {background: pink;float: left;}
		.box2 {background: green;float: left;}
	</style>
</head>
	<body>
	    <div class="box">
	    	<div class="box1"></div>
	    	<div class="box2"></div>
	    </div>
	</body>
</html>
複製代碼

原理：利用overflow屬性會建立BFC來清除浮動的。

優勢：用法簡單。

缺點：超出元素對象後，會被隱藏

建議：此方法看狀況而用

方法四：給浮動的父親加上dispaly:inline-block

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Examples</title>
	<style>
		.box {background: blue;border: 1px solid black;display: inline-block}
		.box .box1,.box .box2 {width: 150px;height: 150px;}
		.box1 {background: pink;float: left;}
		.box2 {background: green;float: left;}

	</style>
</head>
	<body>
	    <div class="box">
	    	<div class="box1"></div>
	    	<div class="box2"></div>
	    </div>
	</body>
</html>
複製代碼

原理：利用display:inline-block屬性會建立BFC來清除浮動的。

優勢：用法簡單。

缺點：把父親變成了內聯塊元素了

建議：此方法看狀況而用