CSS清除浮動

引出問題：

<style type="text/css">
     .inner { 
          float: right; 
     } 
</style> 

<div class="outer"> 
    <img class="inner" src="/images/ilta.png"> 
    <div class="inner">這個圖片比包含它的元素還高， 並且它是浮動的，因而它就溢出到了容器外面!</div> 
</div>

這裏沒有給最外層的div 設置高度，若是它裏面的元素不浮動的話，那麼這個外層的高是會自動被撐開的。可是當內層元素浮動後，就出現了一下影響：

1. 背景不能顯示
2. 邊框不能撐開
3. margin 設置值不能正確顯示 (padding不會受影響)

 

1. 使用額外標籤法

<style type="text/css">
     .inner { 
          float: right; 
     }
     .clearfix{
          clear: both;
     }
</style>

<div class="outer"> 
    <img class="inner" src="/images/ilta.png" alt="An Image"> 
    <div class="inner">好多了！</div> 
    <div class="clearfix"></div>
</div>

這是早期廣泛使用的方法，可是對於有代碼潔癖的人來講，解決的不夠完美

 

2.使用 :after 爲元素

<style type="text/css">
       .inner { 
            float: right; 
       }
        .clearfix:after{  /*最簡方式*/
            content: '';
            display: block;
            clear: both;
        }
        /* 新浪使用方式
        .clearfix:after{ 
            content: '';
            display: block;
            clear: both;
            height: 0;
            visibility: hidden;
        }
        */
        .clearfix{ /*兼容 IE*/
            zoom: 1;
        }
</style>

<div class="outer clearfix"> 
    <img class="inner" src="/images/ilta.png" alt="An Image"> 
    <div class="inner">好多了！</div> 
</div>

原理：他是利用:after和:before來在元素內部插入兩個元素塊，從面達到清除浮動的效果。其實現原理相似於clear:both方法，只是區別在於:clear在html插入一個div.clear標籤，而outer利用其僞類clear:after在元素內部增長一個相似於div.clear的效果。

其中clear:both;指清除全部浮動；content: '.';display:block;對於FF/chrome/opera/IE8不能缺乏，其中content（）能夠取值也能夠爲空。visibility:hidden;的做用是容許瀏覽器渲染它，可是不顯示出來，這樣才能實現清楚浮動。

 

3. 利用 overflow:hidden 屬性

<style type="text/css">
       .outer{
            overflow: hidden;
            zoom: 1;/*兼容 IE*/
        }

       .inner { 
            float: right; 
       }
</style>

<div class="outer"> 
    <img class="inner" src="/images/ilta.png" alt="An Image"> 
    <div class="inner">好多了！</div> 
</div>

原理：使用overflow屬性來清除浮動有一點須要注意，overflow屬性共有三個屬性值：hidden,auto,visible。咱們能夠使用hiddent和auto值來清除浮動，但切記不能使用visible值，若是使用這個值將沒法達到清除浮動效果，其餘兩個值均可以，其區聽說在於一個對seo比較友好，另個hidden對seo不是太友好，其餘區別我就說不上了，也不浪費時間。

 

4. 父元素浮動

當父元素浮動的時候，無需爲子元素的浮動清除浮動,佈局時常常用到

<style type="text/css">
       .outer{
            float: left; 
        }

       .inner { 
            float: left; 
       }
</style>

<div class="outer"> 
    <img class="inner" src="/images/ilta.png" alt="An Image"> 
    <div class="inner">好多了！</div> 
</div>

能夠看出雖然 outer DIV 消除了塌陷現象，但因爲其也發生了浮動故，其後元素若處於正常文檔流，會被跌在底下。

若是要解決能夠參考前面的辦法。

<style type="text/css">
     .outer{
          float: left; 
     }
     .inner { 
          float: left; 
     }
     .clearfix{
          clear: both;
     }
</style>

<div class="outer"> 
    <img class="inner" src="/images/ilta.png" alt="An Image"> 
    <div class="inner">好多了！</div> 
</div>
<div class="clearfix"></div>

 

5. 父元素處於絕對定位

<style type="text/css">
     .outer{
          position: absolute;
     }
     .inner { 
          float: left; 
     }
     .clearfix{
          clear: both;
     }
</style>

<div class="outer"> 
    <img class="inner" src="/images/ilta.png" alt="An Image"> 
    <div class="inner">好多了！</div> 
</div>
<div class="clearfix"></div>

與上一個方法同理，因爲絕對定位已脫離正常文檔流，故出現相同狀況，解決辦法依舊能夠使用以上辦法結合，靈活多變。

 

 

 

摘自：  清除浮動（clearfix hack）  

           CSS清除浮動float的三種方法總結，爲何清浮動？浮動會有那些影響？   

           淺談 CSS 清除浮動的 6 種方法