由CSS浮動 定位引發的對CSS標準流的思考

2021-08-09 00:06:00 字數 1363 閱讀 4876

css標準流是一種css布局規則。之所以標準,是因為在不使用其它特殊的規則(如浮動、定位)下,css所預設的對html各種元素的排列規則。

標準流是指元素會自動從左往右,從上往下的流式排列。並最終窗體自上而下分成一行行,並在每行中從左至右的順序排放元素。

在html文件中,css將元素分為兩大類:塊級元素和行內元素。常見的塊級元素有div標籤 、p 標籤等, 常見的行內元素有span標籤、em標籤、strong標籤等。

塊級元素總是以塊的形式表現出來,並且跟同級的兄弟塊依次豎直排列,左右自動伸展,直到包含它的元素的邊界,在水平方向上獨佔一行,不能與其它的元素並列。

下面舉個直觀的例子:

this is

paragraph

text, but you knew that. within the content of this paragraph

is an image that's been floated.

the block for

the image is

theparagraph.

this is

paragraph

text, but you knew that. within the content of this paragraph

is an image that's been floated.the block for

the image is

theparagraph.

this is

paragraph

text, but you knew that. within the content of this paragraph

is an image that's been floated.

the containing block for

the floated image is

theparagraph.the block for

the image is

theparagraph.

執行結果:

在這個例子裡,我定義了三個塊級元素(p標籤),可以發現三個塊級元素,都各自獨佔一行,不允許其它元素並列。同時也定義了兩個行內元素(strong標籤和em標籤),可以發現在執行結果的第三行中,這兩個行內元素是從左到右並列一行。

所以,這就是css標準流所定義的布局。當然,塊級元素和行內元素並不是絕對的,我們也可以用display屬性來讓塊級元素稱為行內元素,讓行內元素成為塊級元素,這裡就不作贅述了。

CSS定位 浮動定位

css定位機制 浮動定位 float屬性 進行浮動定位 left,right clear屬性 清除浮動 left,right,both float屬性 1.概述 div實現橫向多列布局 float屬性 left 左浮動 right 右浮動 none 不浮動 下圖為 的實現 float屬性用途 在 混...

css浮動定位

請看下圖,當把框 1 向右浮動時,它脫離文件流並且向右移動,直到它的右邊緣碰到包含框的右邊緣 如果把所有三個框都向左移動,那麼框 1 向左浮動直到碰到包含框,另外兩個框向左浮動直到碰到前乙個浮動框。在 css 中,我們通過 float 屬性實現元素的浮動。浮動框旁邊的行框被縮短,從而給浮動框留出空間...

CSS浮動定位

left 左浮動,左邊沒有任何元素 right 右浮動,右邊沒有任何元素 none 不浮動 清空左右的浮動元素 both 清除左右兩邊的浮動 left和right 只清除乙個方向的浮動 none是預設值 只在需要移除一直盯的清除值時用到 如果乙個元素的子元素都浮動起來,那麼他的父元素的高度自動坍塌到...