CSS之float屬性詳解

float屬性指定乙個盒子（元素）是否應該浮動，可以設定浮動方向。

css語法

float：left|right|none|inherit ；

屬性值：值描述

left

元素向左浮動

right

元素向右浮動

none

預設值。元素不浮動，並會顯示在其文字**現的位置

inherit

規定應該從父元素繼承float屬性的值

簡單來說就是讓塊級元素併排在一行當中顯示。

lang
="en"
>
>
charset
="utf-8"
>
>
css之float詳解title
>
>
.left
.right
divstyle
>
head
>
>
class
="left"
>
左浮動div
>
class
="right"
>
右浮動div
>
body
>
html
>

如果我們把左右浮動給去掉那麼塊級元素就獨自佔一行（這個解說夠清楚了吧）。

浮動元素會脫離文件流，因此，它無法使得其他元素和其相對位置關係保持正常。也無法使得自己的父容器正確計算自己的大小。(這個沒那麼好理解，繼續往下看）

lang
="en"
>
>
charset
="utf-8"
>
>
css之float詳解title
>
>
.father
.left
.right
div.footer
style
>
head
>
>
class
="father"
>
class
="left"
>
左浮動div
>
class
="right"
>
右浮動div
>
div>
class
="footer"
>
底部塊級元素
div>
body
>
html
>

上圖中我們可以看到：包裹左右浮動的父元素（黃色塊）沒辦法包裹在其內部，這時候我們說是父元素高度坍塌，左右浮動塊已經脫離了文件流，導致底部塊級元素（灰色塊)的位置不是我們想要的正常效果。要解決這種問題通常採用：清除浮動和閉合浮動。

清除對應的單詞是 clear，對應 css 中的屬性是 clear：left | right | both | none。

.footer

這時候我們看到只能使底部塊級元素不受浮動的影響，正常顯示（是我們想要的效果），但是父元素高度坍塌的問題並沒有解決掉，所以我們採取閉合浮動的方式，而不應該是清除浮動。

更確切的含義是使浮動元素閉合，從而減少浮動帶來的影響。

class
="father clear"
>
class
="left"
>
左浮動div
>
class
="right"
>
右浮動div
>
div>
.clear::after 
.clear

推薦檢視：zoom:1 是什麼鬼？有什麼作用？

回來又看看，我記得當時學的時候是說float脫離了文件流，但是後面的內容怎麼沒有頂上去呢？所以又去找了答案。float的元素脫離正常的文件流，但是還會佔據文件流的文字空間。

float探索，脫離文件流？不脫離文件流？

CSS浮動屬性Float詳解

float 是 css 的定位屬性。在傳統的印刷布局中，文字可以按照需要圍繞。一般把這種方式稱為文字環繞在網頁設計中，應用了css的float屬性的頁面元素就像在印刷布局裡面的被文字包圍的一樣。浮動的元素仍然是網頁流的一部分。這與使用絕對定位的頁面元素相比是乙個明顯的不同。絕對定位的頁面元素被...

CSS浮動屬性Float詳解

原文 float 是 css 的定位屬性。在傳統的印刷布局中，文字可以按照需要圍繞。一般把這種方式稱為文字環繞在網頁設計中，應用了css的float屬性的頁面元素就像在印刷布局裡面的被文字包圍的一樣。浮動的元素仍然是網頁流的一部分。這與使用絕對定位的頁面元素相比是乙個明顯的不同。絕對定位的頁面...

CSS浮動屬性Float詳解

什麼是css float？float 是 css 的定位屬性。在傳統的印刷布局中，文字可以按照需要圍繞。一般把這種方式稱為文字環繞在網頁設計中，應用了css的float屬性的頁面元素就像在印刷布局裡面的被文字包圍的一樣。浮動的元素仍然是網頁流的一部分。這與使用絕對定位的頁面元素相比是乙個明顯的...

CSS之float屬性詳解

CSS浮動屬性Float詳解

CSS浮動屬性Float詳解

CSS浮動屬性Float詳解

相關推薦