浮動與清除浮動(一)

2021-07-11 20:12:09 字數 1209 閱讀 8719

css中,存在三種定位機制:(1)標準文件流(normal flow);(2)浮動(floats);(3)絕對定位(absolte positioning)

本文介紹浮動,其他暫且不說。

在介紹浮動之前先說一下標準流。

html語言當中另外乙個相當重要的概念----------標準流!或者普通流。標準流實際上就是乙個網頁內標籤元素正常排列的順序的意思;比如塊級元素會獨佔一行,行內元素會按順序依次從左向右,從上向下排列;按照這種大前提的布局排列之下絕對不會出現列外的情況叫做標準流布局,也稱做流式布局。

標準流按我的理解就是瀏覽器預設布局的方式,也就是從上往下,從左向右的預設的排班布局的方式。

word中和文字混排

浮動最早是用來解決和文字的混排問題的,後來發現浮動用來布局的效果很好,漸漸也就成為行業的乙個標準。

浮動(float),浮動的盒子可以向左或向右移動,直到它的外邊緣碰到包含盒子或另乙個浮動盒子的邊框為止。

浮動做布局,僅僅是附帶來的,是濫用的結果(當然這個濫用最後的結果是好的)。本質是用於**排版。

三.浮動的屬性

屬性值描述left

左浮動right

右浮動none

不浮動(預設) 四.

元素浮動後,會脫離標準流,但是還會影響標準流的布局。

沒有設定浮動之前:

設定浮動之後:

(再次看出浮動本質是是用於**排版。)

五.浮動的特性

1.浮動脫離標準流,不佔位置,但會影響標準流。

2. 浮動的元素

a排列位置,跟上乙個元素(塊級)有關係。如果上乙個元素有浮動,則

a元素頂部會和上乙個元素的頂部對齊;如果上乙個元素是標準流,則

a元素的頂部會和上乙個元素的底部對齊。

3.乙個父盒子裡面的子盒子,如果其中乙個子級有浮動的,則其他子級都需要浮動。這樣才能一行對齊顯示。

4.浮動根據元素書寫的位置來顯示相應的浮動。

5. 元素新增浮動後,如果沒有設定寬高的話,元素會具有行內塊元素的特性。元素的大小完全取決於定義的大小或者預設的內容多少。也就是具有了包裹性。

6.浮動具有破壞性,元素浮動後,破壞來原來的正常流布局,造成內容塌陷。

注意:如果乙個標準流的父盒子,沒有設定高的情況下,所有的子盒子進行了浮動,那麼父盒子的高度會塌陷成0.

浮動與清除浮動

left 元素向左浮動。right 元素向右浮動。none 預設值。元素不浮動,並會顯示在其在文字中出現的位置。浮動的特性 浮動元素會從普通文件流中脫離,但浮動元素影響的不僅是自己,它會影響周圍的元素對齊進行環繞。不管乙個元素是行內元素還是塊級元素,如果被設定了浮動,那浮動元素會生成乙個塊級框,可以...

浮動與清除浮動

為元素設定了浮動之後,元素就會脫離文件流 可以看做是漂浮在文件流之上 存在。所有產生了浮動流的元素,塊級元素看不到它們。產生了bfc的元素和文字類屬性 inline 的元素以及文字都能看到浮動元素。如何觸發乙個盒子的bfc?position absolute float left right dis...

浮動與清除浮動

浮動布局是一種常見的布局方式,最初的使用目的是進行 的混排 清除浮動 浮動的使用場景 浮動通過css定義 div1 浮動可以取的值 none 預設 left right 當元素進行左浮動或者右浮動之後會脫離文件流,並且構成乙個浮動流,會覆蓋在沒有浮動的元素上,並且允許文字和內聯元素環繞在它周圍 浮動...