CSS——浮動及清除浮動

浮動

• 浮動目的：最初是爲了其餘內容（如文本）「圍繞」該圖像，後來CSS容許浮動任何元素
• 浮動產生bug的緣由：當一個內層元素浮動時，若是沒有關閉浮動，父元素就不會再包含這個浮動的內層元素了，由於此時浮動元素已經脫離了文檔流，致使外層不能被撐開

浮動和絕對定位的區別

• 以下代碼：

html

<div class="box">
        <div class="left"></div>
        <div class="right">
            我只是想測試一下哈哈哈哈哈哈哈哈哈
        </div>
    </div>

css

.left{
        width: 200px;
        height: 300px;
        background-color: red;
        position: absolute; //絕對定位  浮動則換成float:left
    }
    .right{
        width: 500px;
        height: 400px;
        background-color: blue;
    }

• 效果

絕對定位

浮動

• 絕對定位：徹底脫離文本流，而且相對於其包含塊定位，以後的元素會完全佔據以前元素位置，文本也會
• 浮動：文本環繞浮動元素

浮動的影響

• 背景不能顯示，邊框不能撐開，margin、padding不能正確顯示，以下代碼
  

• 效果展現
  

從上面效果能夠看出，父級元素的背景顏色未被顯示，而且父級元素高度塌陷（父元素不寫高度時，子元素寫了浮動後，父元素會發生高度塌陷），box的高度爲0

清除浮動（使用較多的方法）

overflow

• 在其父元素設置{overflow:hidden}，就是在以上代碼的box元素上加上這一行代碼

• 原理：由於這個屬性至關因而讓父級緊貼內容，便可緊貼其對象內內容

  clear:both

• 在浮動元素下方添加空div,並給該元素寫css樣式{clear:both;}

  • 問題：增長了HTML和CSS代碼量

    父級元素也浮動

• 讓浮動元素的父級元素也浮動

• 問題：每一個元素都得浮動，容易出問題

  僞類清除方法（主流）

• 將父級div（clearfix）定義以下代碼
  

• 原理： 利用僞類在元素內插入兩個元素塊

清除浮動後的效果