關於css浮動的一些理解

2021-07-22 15:04:21 字數 1468 閱讀 2581

學習了後的一些體會

今天自學css的浮動(float)時,一直看不懂w3school上的一段**,具體如下:

"never increase, beyond what is necessary, the number of entities required to explain anything." william of ockham (1285-1349)

at w3school.com.cn you will find all the web-building tutorials you need,

from basic html and xhtml to advanced xml, xsl, ********** and wap.

w3school.com.cn - the largest web developers site on the net!

這段**展示的效果如圖:

之前我一直十分不解

①、既然left

是左浮動,為什麼當content也設定為左浮動會出現兩個不同列的情況(大部分瀏覽器不會有這個問題,但偏偏我就遇到了。。。)

如圖:

答:那個參考的部落格鏈結裡面告訴我們:假如某個div元素a是浮動的,如果a元素上乙個元素也是浮動的,那麼a元素會跟隨在上乙個元素的

後邊(如果一行放不下這兩個元素,那麼a元素會被擠到下一行);

所以問題的答案其實就是這個框裡面left和content加起來超過了一行所以不能放在一行:-(

這也同時告訴我們如果一定要組合到同一行用乙個浮動和乙個標準流是最好的!

②、div.header,div.footer裡為什麼要clear:left

答:left和content兩個框雖然合在同一行了,但是未必嵌合得很好,也就是可能有乙個框底部會比較突出,如果當left框比較突出的時候,你不加clear:left會出現這個效果:

底部這個footer框把left框擋住了,因為我們知道,標準流的框是一行挨著一行的,所以footer框肯定挨著content框,如果content剛好比較「矮」,footer就會將與其同行的left框擋住了。這個時候對footer框新增clear:left就能夠使其左邊框不會接合到浮動框(注意不能對left框新增clear:right,沒用的!具體參照我前文部落格鏈結

)。總之記住以下原理:

將乙個框浮動,浮動的框上邊是標準流元素,則頂部與這個元素的底部對齊,

另乙個框不浮動,則也會頂部與上面這個元素的底部對齊。

這樣兩個框即可完成合併。

關於css定位的一些理解

static 預設值。無特殊定位,物件遵循html定位規則 absolute 將物件從文件流中拖出,使用left,right,top,bottom 等屬性相對於其最接近的乙個最有定位設定的父物件進行絕對定位。如果不存在這樣的父物件,則依據body物件。而其層疊通過z index屬性定義 fixed ...

關於熵的一些理解

對於理工科學生來說,熵 並不是乙個陌生的名詞。在諸如 大學物理 熱力學 和 資訊理論 等課程中都會有所介紹。但同時 熵 又是乙個顯得有點神秘的概念,看不見也摸不著。我最早是在高中物理課中聽說的,大概是在介紹 熱力學第二定律 時提到的。熱力學第二定律的內容是 熱力學過程是不可逆的 孤立系統自發地朝著熱...

關於float的一些理解

float是否脫離文件流,乙個父元素不設定overflow的話,子元素float,就不會把父元素撐開,換句話說,他就不會有高度,但是做個demo 父元素overflow hidden 子元素前兩個float,第三個不float,結果是第三個沒有clear浮動的元素,跟float的元素出現在同乙個位置...