關於css脫離標準文件流的兩種方式

2021-07-22 14:16:39 字數 1768 閱讀 3264

所謂脫離標準文件流

就是將元素從普通的布局排版中拿走,其他盒子在定位的時候,會當做脫離文件流的元素不存在而進行定位

不浮動的盒子會無視浮動的盒子,假使現有兩個盒子,乙個浮動乙個不浮動,則浮動的盒子會覆蓋不浮動的盒子。如下**的結果所示:

結果如圖:

盒子元素會無視浮動的元素,但是盒子元素裡面的文字並不會無視浮動元素,如下圖所示:

可以看到藍色背景色盒子裡的文字注意到了這個浮動元素於是在盒子裡右推的形式圍繞在浮動盒子的周圍。

此外,一旦乙個元素浮動了,那麼他就可以設定寬高,可以併排,無論原來他是塊級元素還是行內元素。當浮動元素裡面有文字時,浮動元素不會覆蓋文字,文字會圍繞浮動元素顯示。

關於清除浮動,為什麼要清除浮動呢?舉乙個自己遇到的例子,**如下:

head

left

sub_left

sub_right

footer

執行後看到如下結果:

尷尬了,注意到footer的盒子飄到上面去了,只剩下文字孤零零的在下面,這是為什麼呢?因為left和right均設定為浮動的狀態,而main並沒有設定高度,可以想象為一條線在head的下面,這樣footer自然無視left和right兩個浮動元素然後飄到上面去了,這是我們需要進行float清除,清除的方式有一下幾種,如下:清除浮動的方法綜合一下答案:

一、clear:both(/left/right);

二、overflow:hidden;width:100%;

三 、:after

四、給main設定高度:.main;margin:0 auto;}

五、:margin:600px 0 0 0;

詳見:推薦使用方法一和方法二,在給footer使用overflow的時候,千萬不要忘記設定它的寬度。 其中

clear:both清除浮動 值

描述left 在左側不允許浮動元素。

right 在右側不允許浮動元素。

both 在左右兩側均不允許浮動元素。

none 預設值。允許浮動元素出現在兩側。

inherit 規定應該從父元素繼承 clear 屬性的值。

overflow 屬性規定當內容溢位元素框時發生的事情。

值描述visible 預設值。內容不會被修剪,會呈現在元素框之外。

hidden 內容會被修剪,並且其餘內容是不可見的。

scroll 內容會被修剪,但是瀏覽器會顯示滾動條以便檢視其餘的內容。

auto 如果內容被修剪,則瀏覽器會顯示滾動條以便檢視其餘的內容。

inherit 規定應該從父元素繼承 overflow 屬性的值。

脫離文字的第二種方式是絕對定位(position:absolute):相比於float,position:absolute不管是文字還是盒子都會直接無視掉浮動元素,將float:left換為position:absolute後可以看到如下結果:

關於浮動的半脫離文件流的理解

最基本的浮動方式我們都知道,它是乙個半脫離文件流的方式,那麼為啥叫做半脫離文件流呢?接下來我們就來以例項來解釋一下 box1 這是第乙個div 答案,不用解釋,都懂,但從這點咱們是否能得出乙個結論,在沒有其它情況下,行內元素是覆蓋塊級元素的。box1 box2 這是第乙個div 這是第二個div 答...

關於CSS裡的兩種定位

設定為相對定位的元素框會偏移某個距離。元素仍然保持其未定位前的形狀,它原本所佔的空間仍保留。如果對乙個元素進行相對定位,它將出現在它所在的位置上。然後,可以通過設定垂直或水平位置,讓這個元素 相對於 它的起點進行移動。例如 box relative 注意,在使用相對定位時,無論是否進行移動,元素仍然...

css樣式設定引起的元素脫離正常文件流的情況

1.position為relative,absolute,fixed的元素 1.1 relative可以認為是半脫離,因為其在正常流中的位置仍然保留,但是定位後的位置是脫離文件流的,即可能遮擋其他元素 1.2 absolute和fixed是完全脫離文件流,即文件沒有給他們佔位置,所以在這種定位的元素...