5 3 清除浮動

2022-09-23 04:12:06 字數 1407 閱讀 3956

父級盒子很多情況下,不方便給高度(比如盒子裡有一堆文字,你不知道具體給多少高度),

這種不方便給高度的情況下,如果父級盒子高度為0,子盒子浮動後就不佔有位置,就會影響下面的標準流盒子。

總結:

17.1 清除浮動的本質

清除浮動主要為了解決父級元素因為自己浮動引起內部高度為0 的問題。清除浮動之後,父級就會根據浮動的子盒子自動檢測高度。父級有了高度,就不會影響下面的標準流了。

17.2 清除浮動的方法(都是臨時的)  clear: left | right | both;  

實際工作中,只用both。

17.2.1 額外標籤法(隔牆法)  在浮動元素末尾新增一個空的標籤例如

style="clear: both";>

,或者其他標籤

等亦可。

17.2.2 父級新增overflow屬性方法  可以給父級新增: overflow為 hidden | auto | scroll  都可以實現。

17.2.3 使用after偽元素清除浮動(額外標籤法的升級版,不用單獨加標籤)  .clearfix:after  

如果是ie6/7,還要寫這句    .clearfix  (這個瞭解一下就好了)

17.2.4 雙偽元素清除浮動

使用方法:

.clearfix:before,

.clearfix:after .clearfix:after .clearfix

總結:當父級沒高度,子盒子浮動了,

影響下面佈局了,

這三點都滿足了,我們就應該清除浮動了。

清除浮動的方式

優點

缺點

額外標籤法(隔牆法)

通俗易懂,書寫方便

新增許多無意義的標籤,結構化較差

父級overflow: hidden;

書寫簡單

溢位的會隱藏

父級after偽元素

結構語義化正確

ie6-7相容性問題,需要多寫幾行**

父級雙偽元素

結構語義化正確

ie6-7相容性問題,需要多寫幾行**

清除浮動3種辦法

一 浮動產生的原因 一般浮動是什麼情況呢?一般是一個盒子裡使用了css float浮動屬性,導致父級物件盒子不能被撐開,這樣css floa...

作業5 2 5 3

執行環境 eclipse 單元測試及異常處理 第三階段目標 成員方法的過載 小夥伴 羅佩堅 分工 詹澤娟 單元測試異常處理 羅佩堅 成員方法...

USACO 5 5 3 Two Five

題意 一個5 5字元矩陣,每個字元比它左面和上面的字元都要大,它可以這樣轉換成一個字串 下一行接在本行行末。所以是一個長度為25的字串 包含...