(學習隨筆)關於浮動元素換行機制的小測試

2022-09-08 16:12:14 字數 2236 閱讀 2366

引言:

之前看了一篇張鑫旭老師的博文《關於文字內容溢位用點點點(…)省略號表示》。其中的他的「margin負值定位法」原理中的「當文字內容足夠長時就把隱藏在上面的省略號層給擠下來了。」著實研究了好久,才發現自己在浮動換行機制這方面的欠缺,同時又發現網上對這一機制並沒有非常深入**的文章,所以自己來做個小測試研究下:)

正文:

在w3school裡css教學中關於浮動的說明裡,對於浮動元素的換行,說法只有一句"浮動的框可以向左或向右移動,直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止。",非常不明確。到底是碰到了邊緣以後是換行呢?還是緊挨在一起呢?

亂想不如實踐!

建立兩個div,以及乙個他們的包含塊div:

1

<

div

id="container"

>

2<

div

id="a"

>

div>

3<

div

id="b"

>

div>

4div

>

1

div5

#container

12#a

19#b

效果:

嗯。。很和諧。。

其次將兩個div的寬度撐滿整個容器,並且都向左浮動

#a#b
效果(邊緣緊挨,但沒有換行):

保持寬度不變,再將兩個div分別向左右浮動,以及分別向右浮動

效果都為(邊緣緊挨,但沒有換行)

再將左div(綠)不設為浮動,保持在正常文件流中,右div(藍)向左浮動

以及將左div(綠)不設為浮動,保持在正常文件流中,右div(藍)向右浮動

進一步,將左div寬度改成更小,使得寬度容下兩個div還有餘:

1#a6

#b12

效果(下面的div仍舊保持原位):

小結:

在一行裡,兩個浮動元素的寬度總和正好等於容器寬度,即左右緊挨著時,外邊緣一邊碰到另乙個浮動框的邊框另一邊碰到容器邊框時,浮動元素不會換行

如果情況是,乙個浮動元素,另乙個為正常文件流中的元素,浮動元素只會在自己存在的一行內左右浮動,不管是否上面有空間上的多餘。

Python學習隨筆2(關於換行 宕機)

只要在如下的 if 條件判斷格式中,修改 m 的值就可以了 if i m m 1 舉例 1 每隔 2 個輸出換行 列印0 9的階乘表,每2個為一行 for i in range 0,9 1 range 的列表中是左閉右開區間 所以要 1,便於理解 item fact i print 2g!10d i...

關於浮動和內聯元素的使用

1 對於同一級的兩個塊,如果我們要使幾個塊可以在同乙個水平線上排開,則這幾個同一級的塊要同時設定浮動float left或者同時設定內聯元素display inline block 如果同一級的塊只有有一些設定了浮動一些沒有設定浮動那麼這些塊很有可能會相互疊在一起 1.1同一級的塊同時設定浮動flo...

關於浮動依照relative父元素的基線是什麼?

關於左右浮動依照relative父元素的基線是什麼?是父元素的content,還是border?我的right span標籤讓它靠右,但必須要設定right 5px 效果如下 要是設定right 0px 就會頂到border。再者 為什麼我的left span設定為left 0px 它卻緊貼著con...