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

2022-08-09 07:21:13 字數 1332 閱讀 3718

我們先來設定兩個div元素,然後分別給它們設定背景顏色。

然後我們再來給文字設定背景顏色,發現div的背景顏色被覆蓋掉了。

由於p是塊級元素,它的寬度與它的父元素是同寬的,所以它的背景顏色蓋住了div的背景顏色。

為了能夠看到p的背景顏色,我們給p的寬度改一改,改為100px。

然後現在我們想讓div1中的p和div2中的p都左浮,我們發現變成了如下都樣式。

我們都盒子為什麼有高度,因為內容都高度撐起了p,然後p的高度又撐起了div,一共是三行字型的高度撐起了div,我們從來沒有設定過div1和div2的高度。

我們先將div1中的第乙個p浮動起來,下面剩餘的兩個p就會撐起div1

然後下面的div2就會緊隨其後繼續向上移動

而div1中的剩餘的p繼續浮動,然後第一行的距離就變短了

因為這三個文字原來都位於第一行,所以浮動以後也是第一行。

又因為上面三個p都浮動走了,沒有剩餘的標準流了,並且浮動流是沒有辦法撐起div的高度的,所以,就只剩這麼高的高度。

我們如何來解決這個問題呢?

導致這個問題的原因就是div沒有高度,那麼我們給div設定高度就可以了。

我們來給div1設定高度,這個就是我們清楚浮動的第一種方式。

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

這節課來學習內牆法,無論是外牆法還是內牆法,它的牆指的就是塊級元素,只不過額外新增的塊級元素它所處的位置不同。我們的外牆法是將塊級元素新增到兩個div之間,而我們的內牆法是要將塊級元素寫到我們第乙個盒子所有元素的最後。我們使用外牆法的時候是沒有後面那個紅色的部分的 為什麼是這樣?因為外牆法是不能夠撐...

css 清楚浮動的幾種方式

方法一 使用clear屬性的空元素 方法二 使用overflow屬性 給浮動的元素容器新增overflow hidden auto 在新增overflow屬性後,浮動元素又回到了容器層,把容器層撐起來,達到清理浮動的效果 另外在 ie6 中還需要觸發 haslayout 例如為父元素設定容器寬高或設...

關於css浮動的一些理解

學習了後的一些體會 今天自學css的浮動 float 時,一直看不懂w3school上的一段 具體如下 never increase,beyond what is necessary,the number of entities required to explain anything.willia...