清除浮動效果，而不使用清除div

Question

我知道每次浮動後添加清晰的div使代碼變髒。

下面是代碼

<div id="container"> 
     <div id="header"> 
      <div class="left-block"> 
       <a href="#" class="logo"></a> 
      </div> 
      <div class="right-block"> 
       <a href="#" class="login"></a> 
       <a href="#" class="register"></a> 
       <div class="technique"></div> 
      </div> 
     </div> 
     <div id="content"> 
      <div class="content-title"><h1>Умная Помощница</h1></div> 
     </div> 
    </div> 

CSS

.left-block {float:left;} 
.right-block{float:right;} 

左和右塊具有浮子（對齊左和右）。我需要清除它們之後的浮動效果，因此＃內容顯示正確。我怎麼做，而不使用清晰的div？

謝謝

Answer 1

有很多的clearfix黑客技術。其中最簡單的方法就是將overflow: hidden添加到容器#header div。

我的首選方法是Nicholas Gallagher's "Micro Clearfix"：

.cf:before, 
.cf:after { 
    content: " "; 
    display: table; 
} 

.cf:after { 
    clear: both; 
} 

.cf { 
    *zoom: 1; /* IE6/7 only */ 
} 

的cf類添加到您的#header元素，你將所有設置！

您也可以與clear: left|right|both屬性，這意味着該元素將包裝後的那一面（或兩面）任何浮動元素清晰的花車 - 你的情況增加clear: both到#content將工作太，但clearfix解決方案是可取的，因爲只需添加clear: both即可解決#content的浮動定位問題，但不會強制#header包含其中的兩個浮動元素。

Answer 2

什麼你追求的是一個clearfix（2）

e.g ,.

.clearfix:after { 
    content: " "; 
    visibility: hidden; 
    display: block; 
    height: 0; 
    clear: both; 
} 

Answer 3

你可以給現有的<div id="content">結算CSS屬性：

#content{ 
    clear:both; 
}