. Float basics 浮動基礎

在了解浮動之前，要先了解文檔流。文檔流是正式輸出的流。元素在前面的元素先輸出。元素寫在后面的后輸出。塊級元素占滿一行。內聯元素按內容的大小占空間。且不占一行。文檔流有別于浮動流。根據w3school規定，由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。如下：

這個黃色的框在左浮動后，他下面的文字p元素就上來了。（為什么上來，因為p元素忽視浮動框的存在。P是文檔流。黃色框是浮動流。）這樣，他和黃色框是在同一行。文字照顧到框的存在所以向后縮進。其實<p>是也占一行的。但是它忽視黃色框的存在。按正常的文檔流輸出。Float以前主要是用于文字環繞圖片的效果。

注釋： 所有元素屬性中有float或者position：abselute后 這個元素輸出就是浮動流。怎么浮動看第2條。個人這么理解：浮動元素跟著浮動元素走。不考慮文檔流。

1. 什么是浮動？

浮動是指浮動一個元素。當你浮動一個元素后，他就會變成一個塊級元素。而且浮動時元素只能浮動到同一行的左邊或者右邊。

浮動的盒子脫離文檔流，然后飄到最左邊或者最后邊。（具體見下面的解釋！）

2. Where will a floated element move to? 浮動元素怎么浮動！

Floated boxes will move to the left or right until their outer edge touches the containing block edge or the outer edge of another float.

浮動的元素到達 body元素的邊框

或者 其父元素的邊框或者到達另外一個浮動的邊框。

If there isn't enough horizontal room on the current line for the floated box, it will move downward, line by line, until a line has room for it.

譯文：如果對于浮動元素來講他所在的行沒有足夠的空間給他。他會移到下面的一行。下面的例子：黑盒子做float：left，黃色的做float：right。

3．當你浮動一個元素時，需要設置一個寬度。

4. 下面分析的是：一個元素在浮動元素的上面或者下面。

（重要的知識點：）★★★★★★★

第一：塊級元素在上，飄的元素在下。塊級元素不會受到影響。

第二：如果飄的元素在上，在他下面的元素講會受他的影響，包圍他。對于文字的話他會圍繞飄的元素。但是其他塊級元素，圖片會伸展到其地下去。這個我從dreamweaver中已經也看到了。

看圖：

如果你不想《p》元素上去了和黃色的框在同一行。可以用：清除浮動。

對p實行清除浮動。

處理這樣的問題，可以對塊級使用清除浮動。

規則如下：clear: left 、clear: right; clear:none;

如果你不想在浮動層下面的元素包圍浮動層，你可以用清除浮動。

總結：一般元素浮動后，會空出自己的所有行。左邊也好右邊也好。

然后其他元素就會包圍他。他需要清除自己的左邊或者右邊。就是表示他還是像以前那樣占那么多行。比如圖片占了那么多行。不讓其他元素包圍他。

要理解下面的現象：

上面的圖片是由這個排列出來的。

Div4 因為第一行排不下去了，所以要下來。他這里有一個過程：先排到div3后面，因為排不下去了，后來就又飛到了div1的下面。因為div1高度高，把他給卡住啦。就出現了這樣的情況。

基本概念：

Viewport是windows窗口的文檔可見部分。

Initial containing block：是對于頁面來講的。指頁面的總寬和長。

Containing box：指的是一個box。這個box帶有其他元素，比如p，ul等元素。

Normal flow：文檔的正常輸出，如果沒有float 或者position應用到這個元素。

天這篇文章我們來說一下css的浮動屬性（float），給塊狀元素添加float屬性可以使其轉變為行內元素，也就是我們所說標簽對象浮動居左靠左（float:left）和浮動居右靠右(float:right)。

（1）float使用語法

css的float主要有3個屬性值none、left、right，默認為none；具體的使用如下所示：

float:none; （不使用浮動）

float:left; （靠左浮動）

float:right; （靠右浮動）

（2）float使用案例

我們通過案例來實際演練一下float元素的使用技巧。

1、float:left的使用練習

我們這里創建一個導航條，導航條包含首頁、關于我們、新聞中心、案例展示等欄目名稱。具體的網頁代碼以及顯示效果就如下圖所示：

由上圖可以看出默認的樣式是豎排顯示的，但是我們常見的網頁導航條都是橫排顯示的，這時候我們就可以使用float屬性來使塊狀元素轉變為行內元素，并讓居左顯示。

這里我們創建一個寬度為980px的導航條，給子元素（li）添加float的屬性并對齊進行填充（padding）以及外間距（margin）的潤色。具體的網頁代碼以及顯示效果就如下圖所示：

網頁中的顯示效果：

2、float:right的使用練習

float:right顧名思義用于元素靠右對齊，我們來看下面的一個例子，我們隨意寫一篇文字，然后文字中插入一張圖片并使圖片右對齊。

我們再網頁中可以看到圖片已經浮動到網頁的右側中去了。

好了，本篇文章就給大家說到這里，大家可以注意看下我們使用float之后會出現什么問題，下邊文章我們會給大家講解如何清除float帶來的負面影響。

每日金句：你不能拼爹的時候，你就只能去拼命！喜歡我的文章的小伙伴記得關注一下哦，每天將為你更新最新知識。

么是 CSS Float（浮動）？

CSS 的 Float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列。

Float（浮動），往往是用于圖像，但它在布局時一樣非常有用。

元素怎樣浮動

元素的水平方向浮動，意味著元素只能左右移動而不能上下移動。

一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。

浮動元素之后的元素將圍繞它。

浮動元素之前的元素將不會受到影響。

如果圖像是右浮動，下面的文本流將環繞在它左邊：

實例

img

{

float:right;

}

彼此相鄰的浮動元素

如果你把幾個浮動的元素放到一起，如果有空間的話，它們將彼此相鄰。

在這里，我們對圖片廊使用 float 屬性：

實例

.thumbnail

{

float:left;

width:110px;

height:90px;

margin:5px;

}

清除浮動 - 使用 clear

元素浮動之后，周圍的元素會重新排列，為了避免這種情況，使用 clear 屬性。

clear 屬性指定元素兩側不能出現浮動元素。

使用 clear 屬性往文本中添加圖片廊：

實例

.text_line

{

clear:both;

}

嘗試一下 ?

更多實例

為圖像添加邊框和邊距并浮動到段落的左側

讓我們為圖像添加邊框和邊距并浮動到段落的左側

標題和圖片向右側浮動

讓標題和圖片向右側浮動。

讓段落的第一個字母浮動到左側

改變樣式，讓段落的第一個字母浮動到左側。

創建一個沒有表格的網頁

使用 float 創建一個網頁頁眉、頁腳、左邊的內容和主要內容。

CSS 中所有的浮動屬性

"CSS" 列中的數字表示不同的 CSS 版本（CSS1 或 CSS2）定義了該屬性。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！