浮動與清浮動（一）：浮動

時間 2019-12-08

標籤浮動简体版

原文原文鏈接

在進行網頁設計佈局時，浮動與清浮動是最須要解決的問題之一。這篇文章記錄了我在學習過程當中的總結與反思，歡迎交流與指正。css

以<div>和<span>爲例：前端

<style type="text/css">
	div, span {border: 1px solid red;}
	</style>

<body>
    <div class="div1">div1</div>
	<div class="div2">div2</div>
	<span class="span1">span1</span>
	<span class="span2">span2</span>
</body>

在 Firefox39 (如下簡稱ff）中獲得以下渲染效果：

能夠得出如下結論：佈局

塊狀元素 div 佔滿整行；學習
塊狀元素支持寬高，不設置時寬默認佔滿整行，高由內容撐開；測試
內嵌（行內）元素 span 不支持寬高，由內容撐開；網站
span 換行被解析，兩個 span 之間間距4像素（即1個半角空格）。spa

inline-block

給 span 和 div 添加 inline-block：.net

<style type="text/css">
    display: inline-block;
</style>

在 Firefox39 獲得以下渲染效果：
設計

能夠獲得如下結論：code

div 被顯示爲內嵌（行內）元素；
換行被解析成5像素；
內嵌元素支持寬高，不設置時由內容撐開。

總結：
從上面一個簡單的例子，彷佛能夠找到浮動的第1種方法，即添加 CSS 樣式``。BTW，display 的經常使用值還包括：inline/block/等，詳見 [CSS display
屬性][4]。

可是，inline-block 是 CSS2.1 新增的值，因此有必要在 IE 下進行兼容性測試（文檔模式：IE7）。
未添加 inline-block 前：

能夠看出，與 FF 的區別在於 IE7 不支持內嵌元素的上下樣式設置。
添加 inline-block 後：

能夠看出，終於支持內嵌元素的上下樣式設置了啊！！！
But，說好的在同一行並排顯示呢？難道真的不能作朋友嗎？！

總結：
IE 7 不支持塊標籤的 display: inline-block 樣式。

float

由於 inline-block 不支持部分 IE 版本，所以嘗試第二種方法：float。
添加 float: left 樣式，並給 span2 設置寬高：

<style type="text/css">
	div, span {
		border: 1px solid red;
		float: left;
	}

	.span2 {
		width: 100px;
		height: 50px; 
	}
</style>

ff 中獲得以下渲染效果：

能夠看出：

使塊元素在一行顯示;
換行未被解析（各元素之間無間距）；
支持寬高，不設置寬高時由內容撐開。

IE7 渲染效果以下，無 bug：

總結：
float 是浮動的利器，這也說明了爲何各大網站會廣泛使用 float。可是，追溯 float 的歷史，能夠知道 float 本來是用來解決圖文混排的，所以濫用 float 並不可取（如同當年濫用 table 佈局），前端大牛張鑫旭博客也有一篇文章專門談到了 float 這個問題。

float 特色

脫離文檔流；

文檔流是指文檔中可顯示對象在排列時所佔用的位置。將窗體自上而下分紅一行行, 並在每行中按從左至右的順序排放元素。
脫離文檔流即再也不按照默認的自上而上、從左至右的順序進行排列，而是按照規定的樣式進行顯示。

脫離文檔流以後，按照指定的一個方向移動直到碰到父級的邊界或者另一個浮動元素中止；

這裏有兩個注意點：一是父級邊界，二是浮動元素。

Demo1:父級邊界(body)
https://jsfiddle.net/ChasonZhang/9Lgugpxu/1/

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

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

經過上面的 demo 能夠發現，當元素 float 以後，它就會一直飄啊飄，一直飄到父級元素（此處是 body）的邊界，即 content 與 border 的分界線處。
所以，若是將 div1 放在 div2 裏面，同時將 div1 設置爲：float:right; 那又會如何變化呢？
https://jsfiddle.net/ChasonZhang/2Ln88n5q/

Demo2: 浮動元素
https://jsfiddle.net/ChasonZhang/9Lgugpxu/2/
當 div1 和 div2 都 float 之後，至關於兩個 div 雖然脫離了文檔流，但如今又處於同一層級，所以又會繼續按照從左到右、從上到下的排列順序進行排列。

提高元素層級（半層）；

http://jsfiddle.net/ChasonZhang/9Lgugpxu/3/

相關標籤/搜索

每日一句

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