課時135 清除浮動方式四(理解)

2022-08-09 07:21:12 字數 582 閱讀 5695

這節課來學習內牆法,無論是外牆法還是內牆法,它的牆指的就是塊級元素,只不過額外新增的塊級元素它所處的位置不同。

我們的外牆法是將塊級元素新增到兩個div之間,而我們的內牆法是要將塊級元素寫到我們第乙個盒子所有元素的最後。

我們使用外牆法的時候是沒有後面那個紅色的部分的

為什麼是這樣?

因為外牆法是不能夠撐起第乙個盒子的高度的。

我們發現外牆法的高度是0

而我們內牆法如下

高度不是0

我們通過谷歌開發者工具的觀察來驗證了我們這個說法

知識點總結:

課時131 清楚浮動方式一(理解)

我們先來設定兩個div元素,然後分別給它們設定背景顏色。然後我們再來給文字設定背景顏色,發現div的背景顏色被覆蓋掉了。由於p是塊級元素,它的寬度與它的父元素是同寬的,所以它的背景顏色蓋住了div的背景顏色。為了能夠看到p的背景顏色,我們給p的寬度改一改,改為100px。然後現在我們想讓div1中的...

清除浮動方式

1 當父元素不設定高度時,標準流中內容高度為父元素的高度 2 但是若為浮動流,浮動流的高度不為父元素的高度。為第乙個標籤設定高度。但是這種方式並不常用,所以一般情況下不會使用。使用clear屬性來清除浮動。clear共有四個取值 none 不進行清除 left 讓浮動元素不去尋找前面左浮動的元素 r...

浮動理解及清除浮動

浮動是css裡布局使用最多的屬性。浮動之後,元素會脫離文件流,緊貼上乙個浮動盒子的邊。一旦我們設定了浮動,那麼該元素就能夠併排展示,而且可以設定寬和高。float right float left 浮動元素會緊貼上乙個浮動元素。若寬度不夠,會換行。頂部頂帖上乙個浮動元素的底部。浮動方向是要一直。di...