css清除浮動使父級元素展開的三個方法

2021-07-09 06:46:26 字數 602 閱讀 5964

乙個沒有設定高度的容器div內如果存在浮動元素(即使用了屬性float:left或者float:right),那麼該父級元素會無法展開。 

舉個例子,有乙個div容器,div容器裡有兩個小容器,分別向左和向右浮動,為了區別這三個容器,分別設定了不同顏色的邊框。 

產生效果: 

注意到父級元素content沒有展開。 

為了使父級元素展開,有三種方法:

第一:設定父級元素的高度,但是要事先知道內容的高度,這裡內部的元素高度是100畫素,加上上下邊框高度2畫素,一共是102畫素。 

複製**

**如下:

第二:新增樣式,並在父級元素結束標籤前新增both:clear樣式。 

複製**

**如下:

第三:新增overflow屬性: 

複製**

**如下:

CSS清除浮動使父級元素展開

乙個沒有設定高度的容器div內如果存在浮動元素 即使用了屬性float left或者float right 那麼該父級元素會無法展開,下面用三種方法解決 源 為 清除子元素的浮動title type text css content left right style head class conte...

CSS清除浮動使父級元素展開的三個方法

乙個沒有設定高程式設計客棧度的容器div內如果存在浮動元素 即使用了屬性float left或者float right 那麼該父級元素會無法展開。舉個例子,有乙個div容器,div容器裡有兩個小容器,分別向左和向右浮動,為了區別這三個容器,分別設定了不同顏色的邊框。複製 如下 產生效果 注意到父級元...

css 清除子元素浮動帶給父元素帶的影響

css語法 clearfix,wrap content tap wrap tap content ul clearfix after,wrap content tap wrap tap content ul after 運用less語法如下 1.建立乙個less檔案,檔名隨意,寫入下面 clearf...