html 影響文件流屬性詳解

2021-07-25 02:42:34 字數 1328 閱讀 5522

下面哪個屬性不會讓 div 脫離文件流(normal flow)?

答案為c

所謂的文件流,指的是元素排版布局過程中,元素會自動從左往右,從上往下的流式排列。並最終窗體自上而下分成一行行, 並在每行中按從左至右的順序排放元素。【

脫離文件流即是元素打亂了這個排列】

,或是從排版中拿走。

所以我們可以知道,除了 position: absolute;和 position: fixed;會直接將元素從排版中拿走從而脫離文件流之外,設定float物件也會 「打亂這個排列」從而也被稱為脫離文件流。

float:right 顯然就打亂了從左到右的文件流排列,而為什麼說float:left也會脫離文件流呢?

我的理解是當子元素設定了float屬性而父元素沒有設定(或保持預設的 position:static ),則子元素會從父元素中溢位(即父元素不會根據子元素的大小進行擴大),因為當元素設定了float屬性之後,其他沒有設定float屬性的盒子會無視這個元素,即文件流下面的沒有設定浮動的元素會何其進行疊加。即可以當作其脫離了文件流,但需要注意的是,其與position:absolute不同的是,其他盒子元素內的文字依然會為float元素讓出位置,圍繞在周圍,所以不會看到文字相互疊加的情況,而absolute定位的元素則會出現文字疊加。所以亦可以理解為脫離了文件流,這種情況通常消除浮動就可以解決。

簡單的介面就是

div1

div2

一、設定float屬性的父元素沒有高度

高度為0.

二、設定float後面的元素,

設定float後的hahahahah占用了他的位置,但是並沒有重疊。

三、float的連續性

.list2 

.list2 ul

.list2 ul li

.div2

.div3

特別有意思,div1下來了,div2還在上面,繼續原來的float元素繼續排列。

HTML 標準文件流(float的浮動屬性)

html元素在標準狀況下的定位方式 行內元素在同一行內橫向排列 塊級元素佔滿整個一行,在頁面中豎向排列 元素不會移動到其它地方去,對於巢狀的元素盒子也是巢狀的 元素的浮動是指設定了浮動屬性的元素會脫離標準文件流的控制,移動到其父元素中相應位置的過程。在css中,通過float屬性來定義浮動,其基本語...

HTML文件流 文字流和脫離文件流

文件流 普通流 在文件流中,html 元素會按照其在 html文件中的位置順序來排布,將窗體自上而下分成一行一行,並在每行中左至右的挨次排放行內元素,遇到阻礙或者寬度不夠自動換行。而塊狀元素將獨佔一行。塊級元素和行內元素.文字流 文字流是相對於文字段落講的。可視為一串字元由左到右 由上而下的讀取和輸...

認識html文件流

寫html,css的同學應該需要清楚什麼是文件流。文件流 將窗體自上而下分成一行一行,並在每行中按從左至右的挨次排放元素,即為文件流。每個非浮動塊級元素都獨有一行,浮動元素則按規則浮在行的一端.若當時行容不下,則另起新行再浮動。內聯元素也不會獨有一行.一切元素 包括塊級,內聯和列表元素 均可生成子行...