浮動與清浮動（二）：清浮動

時間 2019-11-10

標籤浮動简体版

原文原文鏈接

上一篇文章主要總結了浮動的兩種方法：display:inline-block 和 float: left/right。
第一種方法的主要侷限是 IE7 不支持，且換行被解析成一個空格；而第二種方法更加可取。可是要記住一點：發明 float 的初衷是爲了解決圖文混排的問題，所以不可濫用（就像當年濫用 table 佈局同樣）。css

所謂「道高一尺，魔高一丈」，既然有浮動，那就必然有清浮動一說，矛盾是無處不在的。 html

爲什麼要有清浮動一說？按照我最簡單的理解：浮動意味着脫離了文檔流（層級提高「半層」），再也不按照原來的邏輯自上而自、從左到右排列元素，那麼必然會對原來的元素佈局產生影響，那麼清浮動就是爲了清除浮動帶來的負面效果。好比下面一段代碼：佈局

.div1 {
		float: left;
		width: 200px;
		height: 200px;
		background-color: red;
	}
	.div2 {
		width: 300px;
		height: 300px;
		background-color: blue;
	}

<div class="div1">div1</div>
	<div class="div2">div2</div>

結果就會致使 div1 遮擋住一部分 div2，固然能夠經過其餘方法來解決這個問題，如設置 div2 的 position，但這是逃避問題，而不是解決問題（清浮動）。如下是我總結的清浮動經常使用方法：測試

clear

clear是爲清浮動而生，清浮動並非並浮動的元素清除掉，而是指不容許指定元素的某個方向上出現浮動元素。clear 的經常使用值有：left/right/both/none，一般用 both。
給上文代碼中 div2 的樣式添加這一屬性：spa

.div2 {
		clear: both;
	}

結果發現 div2 在下一行顯示，且換行未被解析成空格。在 Chrome44/FF39/IE-11 下面均測試經過，棒呆！看來 clear彷佛是清浮動的萬能鑰匙。（clear 是 CSS1 規定的屬性）.net

「塌陷」的本質

再來測試嵌套元素中的浮動效果：code

<style type="text/css">
	body {
		margin: 0;
		padding: 0;
	}
	.div1 {
		border: 10px solid #000;
		margin: 20px auto;
		width: 600px;
	}
	.div2 {
		background-color: red;
		width: 400px;
		height: 300px;
		float: left;

	}
	</style>

<div class="div1">
		<div class="div2"></div>
	</div>

結果在 FF39 中獲得了以下的顯示效果：

去掉 div2 的 float:left，顯示以下：

能夠看出，float屬性使 div2 的父級元素 div1 高度變爲0，俗稱「塌陷」。不少人從float對父級元素的影響來解釋「塌陷」，按照我我的的理解，以下：
咱們迴歸 float 的本質，浮動會致使當前元素脫離文檔流，提高自身層級「半層」，也就是說浮動的元素也就再也不屬於原來的層級，在這裏來講，從顯示效果（樣式）上看： div2 也就再也不是 div1 的子元素。
在這個例子中，再添加 div3：htm

<div class="div3"></div>

.div3 {
		width: 600px;
		border: 10px solid #000;
		margin: 0 auto;
	}

在 FF39 中獲得以下效果：

也就是說，div 塊級元素的內容爲空時，其 Content Width/Height = 0。既然浮動元素再也不屬於原來的父級元素，那父級元素裏裏就是空的，所以也就無所謂「塌不塌陷」一說了。借用一句禪語：「原本無一物，何處惹塵埃！」blog

總結上文，在結構(HTML)上，div2 屬於 div1。可是，在形式(CSS)上，div2 不屬於 div1。也就是說，這是結構和形式分離帶來的矛盾。而清浮動，在某種意義上就是爲了清除這一矛盾。圖片

清浮動：父級元素

清浮動，無非從兩方面着眼，一是父級元素自己，二是父級元素裏的內容。
1、從父級元素自己來：
既然是因爲父級元素和子級元素不在同一層級，那麼能夠給父級元素添加浮動：float/display:inline-block：

可是，這種方法的缺陷在於：改變了父級元素的樣式，還要添加其餘樣式，增長了工做量，若是是多層嵌套的話，那勢必要修改多個父級元素的樣式，「子子孫孫無窮盡也」~

清浮動：子級元素

2、從子級元素考慮，也就是從父級元素裏的內容考慮：
既然是由於父級元素 div1 中沒有內容致使的，那能夠考慮在 div1 裏面加點料：

方法1：

.clear{
		clear: both;
        height: 0;    // 解決 IE6 下最小高度19px的問題
		font-size: 0;    // 解決 IE6 下最小高度19px的問題
	}

<div class="clear"></div>

經測試，IE7（包括）以上，加註釋的兩行不寫其實也不要緊。

方法2：

<br clear='both'>

IE6 以上全兼容，關於<br clear='both'>這一行，能夠查閱 w3c 中文網的解釋。

方法3：

方法1和方法2的缺陷在於，須要在<HTML>中添加內容。爲了改變樣式而添加內容，這違背告終構與樣式分享的原則。
所以，能夠考慮採用僞類:after，並結合方法2：

.clear {
		zoom: 1;    // zoom 是 IE6 私有屬性
	}
	.div1:after {
		content: '';
		display: block;
		clear: both;
	}

<div class="div1 clear">
		<div class="div2"></div>
	</div>

帶註釋的一行是專門針對 IE6 的小 hack，由於剛裝了 Win10，IETester 好像出了點問題不能用了，所以沒測試 IE6 下的兼容性，IE7 及以上均測試經過。
關於 zoom，能夠閱讀這一篇文章：CSS中鮮爲人知Zoom屬性的使用介紹(IE私有屬性)

關於浮動與清浮動，目前我的的總結基本就是這兩篇了。

相關標籤/搜索

每日一句

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