浮動(Float)

張金寶發布于2019-08-29 12:33 / 789人閱讀

摘要：右浮動盒也有類似的規則與兄弟不能重疊一個浮動盒的外不能高于其包含塊的。當浮動盒出現在兩個合并的之間時，浮動盒的定位就像它有一個空的匿名塊父級存在于當前流一樣。

浮動的原始意義

在絕大多數Web開發者的語境中，“布局”這個術語和“排版”是有差異的。“布局”偏向于指宏觀的GUI區域劃分，比如雙欄布局或三欄布局等。從這一點出發，float其實本不是一項用于“布局”的屬性。float對應的其實是傳統印刷排版中圖文混排中的環繞。

在 CSS 中，用 float 和 position 的區別是什么？

浮動的特性 float與block

常見元素inline,inline-block,table-cell等等設置float屬性,都被視為塊級元素,相當于display設置為block

Specified value	Computed value
inline-table	table
inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block	block
其它	與指定值相同

float與包裹性

如果margin-left或者margin-right的計算值為auto，它們的應用值為0

對于非替換元素,如果width的計算值為auto，應用值為“自適應（shrink-to-fit）”寬度

自適應寬度的計算與用自動表格布局算法去算一個表格單元的寬度類似。粗略地講：通過格式化不含除顯式換行外的換行來計算首選寬度（preferred width），然后計算首選最小寬度（preferred minimum width），例如，通過嘗試所有可能的換行。CSS 2.1沒有定義準確的算法。第三步，算出可用寬度（available width）：這種情況下，就是包含塊的寬度減去margin-left，border-left-width，padding-left，padding-right，border-right-width，margin-right和所有相關滾動條的寬度的應用值

那么自適應寬度就是：min(max(首選最小寬度, 可用寬度), 首選寬度)

對于替換元素,width的應用值由行內的可替換元素決定

我們說的包裹性,主要就是指自適應寬度,通常情況下也就是首選寬度

特定情況下（例如，見上面的10.6.4節和10.6.6節），一個建立了塊格式化上下文的元素的高度按照如下規則計算：

如果它只含有行內級子級，高度就是最高的行盒的top與最低的行盒的bottom之間的距離

如果它只含有塊級子級，高度由就是最高的塊級子級盒的top margin-edge到最低的塊級子級盒的bottom margin-edge之間的距離

此外，如果該元素含有任意bottom margin邊位于元素的content邊下方的的浮動后代，那么高度增加至能夠包含這些邊。只考慮參與此塊級格式化上下文的浮動，例如，不考慮絕對定位的后代中的浮動或者其它浮動

float包裹性展示

float與兄弟元素

浮動在浮動模型中，一個盒先根據常規流布局，然后從流中取出來盡可能地左移或右移。其它內容可能會沿著浮動（盒）的一側排列（Content may flow along the side of a float）

一個浮動盒會向左或向右移動，直到其外邊（outer edge）挨到包含塊邊或者另一個浮動盒的外邊。如果存在行盒，浮動盒的外top（邊）會與當前行盒的top（邊）對齊

因為浮動（盒）不在流內，在浮動盒之前或者之后創建的未定位的（non-positioned）塊盒會豎直排列，就像浮動不存在一樣。然而，接著（next to）浮動（盒）創建的當前及后續行盒會進行必要的縮短，為了給浮動（盒）的margin box讓出空間

浮動（盒）的內容會堆疊起來，就像浮動（盒）生成了新的層疊上下文（stacking contexts）一樣，除了所有定位的元素和實際創建了新的層疊上下文并參與了浮動（盒）的父級堆疊上下文的元素。一個浮動（盒）可以與常規流中的其它盒重疊（例如，當一個常規流盒接著一個有負margin的浮動（盒）時），出現這種情況時，浮動（盒）會被渲染在未定位的（non-positioned）流內塊之前，流內行內（盒）之后

float雖然使元素脫離了文檔流,但是它仍然占據著位置,這也是影響外部元素寬度計算的原因之一

float盒的兄弟塊盒會豎直排列,當作float盒不存在,而兄弟行內盒會縮進,給float讓出空間

對于float盒,如果它與常規流中的其它盒重疊,那么它會覆蓋流內塊,并且被流內行內盒覆蓋

float與圖文混排

一個浮動的盒與任何其它盒之間的margin不會合并（甚至一個浮動盒與它的流內子級之間也不會）

一個左浮動盒的left外邊（outer edge）不能位于其包含塊的left邊的左邊。向右浮動的元素也有類似的規則
float與左右邊界

如果當前盒是向左浮動的，并且在這之前源文檔中還有元素生成了左浮動盒，那么對于每一個之前的盒，要么當前盒的left外邊在之前的盒的right外邊的右邊，要么它的top要比之前的盒的bottom低。右浮動盒也有類似的規則
float與兄弟float排列

一個左浮動盒的right外邊不能位于接著它的任意右浮動盒的left外邊的右邊。右浮動盒也有類似的規則
float與兄弟float不能重疊

一個浮動盒的外top（outer top）不能高于其包含塊的top。當浮動（盒）出現在兩個合并的margin之間時，浮動（盒）的定位就像它有一個空的匿名塊父級存在于（當前）流一樣。這個父級的位置通過margin合并章節中的規則來定義
float與margin

一個浮動盒的外top不能高于源文檔中任何在此之前的元素生成的塊盒或者浮動盒的外top
float與塊盒,浮動盒

一個元素的浮動盒的外top不能高于任何含有源文檔中在此之前的元素生成的盒的行盒的top
float與行盒

左邊存在另一個左浮動盒的左浮動盒的right外邊不能位于其包含塊的right邊的右邊（不嚴謹的：一個左浮動盒不能超出right邊，除非它已經盡量向左（緊挨著包含塊的left邊）了）。右浮動元素也有類似的規則
多個float與包含塊邊界

浮動盒必須盡量高往高放（A floating box must be placed as high as possible）

左浮動盒必須盡量往左放，右浮動盒盡量往右放。更高的位置要比更左/右的位置優先
float與高度

所以,float自身的主要原則是:浮動元素之間不重疊；盡可能向邊緣漂浮，但不越界。

float與父元素

當overflow計算值為visible時常規流中的塊級不可替換元素

只考慮常規流中的子級（即，浮動盒和絕對定位的盒會被忽略，并且相對定位的盒不考慮其偏移）。注意子級盒可以是一個匿名塊盒

這就是float元素的父元素塌陷的原因

float與父元素塌陷

那么,float在父元素的兄弟元素上會不會起作用呢

float與父元素的非浮動,浮動兄弟元素

這些規則里涉及的其它元素僅僅是指與浮動（盒）處于同一個塊格式化上下文的其它元素

由于父元素跟它的兄弟元素同出于一個BFC中,所以行為規則與同處于同一個父元素之中的元素的規則相同：塊級元素重疊；行內元素環繞；浮動元素跟隨。

clear與閉合浮動

該屬性說明了一個元素的盒的哪一邊不能與之前的浮動盒相鄰。"clear"屬性不考慮元素自身的或者其它塊格式化上下文中的浮動

為了解決上面的父元素高度塌陷以及父元素的兄弟元素受到子元素float影響的問題,我們需要閉合浮動

.clearfix:before,
.clearfix:after
{
  display: table;
  content: " ";
}
.clearfix:after
{
  clear: both;
}
.clearfix{*zoom:1;} //ie 6 7

before是因為table類型能生成獨立的bfc，防止上邊距塌陷，

after負責清除浮動，防止父級高度塌陷；配合使用，代碼少，效率高。

想要具體了解,請看一絲大大的那些年我們一起清除過的浮動,這里就不詳細寫了

回歸CSS標準之Float

云服務器 GPU云服務器 float float:left float:right float類型

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111981.html

CSS基礎入門之float

摘要：在正常情況下，頁面總是從左到右，從上到下布局，這種被稱為正常的流。破壞文檔流這是最本質的特性，因此設計的初衷就是破壞文檔流。但是也有一種情況是，浮動元素前后并沒有內聯元素，因此也就不存在行框盒子，這時候就是浮動錨點在起作用。前幾天有小伙伴說對float的學習云里霧里的，下面我就給大家說一下關于float的一些問題。在css中，是存在流的概念的。在正常情況下，頁面總是從左到右，從上到...

xinhaip 2019-08-30 10:59 評論0 收藏0
深入理解css之float

摘要：破壞文檔流這是最本質的特性，因此設計的初衷就是破壞文檔流。但是也有一種情況是，浮動元素前后并沒有內聯元素，因此也就不存在行框盒子，這時候就是浮動錨點在起作用。前言在css中，是存在流的概念的。在正常情況下，頁面總是從左到右，從上到下布局，這種被稱為正常的流。但是有很多情況，正常流是沒辦法實現的，因此我們需要一些手段來破壞流，從而實現一些特殊的布局，而本節的主角float就具備破壞流...

Nekron 2019-08-29 16:29 評論0 收藏0
CSS Float nine rules

注：本文是對眾多博客的學習和總結，可能存在理解錯誤。請帶著懷疑的眼光，同時如果有錯誤希望能指出。如果你喜歡我的文章，可以關注我的私人博客:http://blog-qeesung.rhcloud.com/ 入門前端也算是有三個月之久了，發現Float這個屬性一直都很迷惑，只是知道一些簡單的浮動規則，并沒有深入去學習，一旦遇到一點復雜的浮動場景，自己也就懵了。于是在網上找了數篇關于浮動的博客文章，加...

bingo 2019-08-29 10:59 評論0 收藏0
CSS Float nine rules

注：本文是對眾多博客的學習和總結，可能存在理解錯誤。請帶著懷疑的眼光，同時如果有錯誤希望能指出。如果你喜歡我的文章，可以關注我的私人博客:http://blog-qeesung.rhcloud.com/ 入門前端也算是有三個月之久了，發現Float這個屬性一直都很迷惑，只是知道一些簡單的浮動規則，并沒有深入去學習，一旦遇到一點復雜的浮動場景，自己也就懵了。于是在網上找了數篇關于浮動的博客文章，加...

Nino 2019-08-01 15:28 評論0 收藏0