clear div를 사용하지 않고 float 효과를 지움

Question

모든 float이 코드를 더럽게 만든 후에 clear 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;} 

좌우의 블록 (왼쪽 및 오른쪽 정렬) 플로트있다. 나중에 float 효과를 지워야하므로 #content가 올바르게 표시됩니다. Clear div를 사용하지 않고 어떻게 할 수 있습니까?

감사합니다.

Answer 1

많은 clearfix 해킹과 기법이 있습니다. 가장 쉬운 방법 중 하나는 컨테이너 #header div에 overflow: hidden을 추가하는 것입니다.

내 선호하는 방법은 Nicholas Gallagher's "Micro Clearfix"입니다 :

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

.cf:after { 
    clear: both; 
} 

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

은 #header 요소에 cf 클래스를 추가하기 만하면됩니다!

또한 어떤 그 쪽 (또는 양쪽 모두)에 요소를 부유 한 후 요소가 바꿈됩니다 의미 clear: left|right|both 속성을 명확 수레 수

- #content에 clear: both이 너무 일하는 것이 추가 귀하의 경우,하지만 clearfix 솔루션 때문에 바람직하다 clear: both을 단순히 추가하면 float 위치 지정 문제가 #content으로 해결되지만 #header에는 두 개의 부동 요소가 포함되지 않습니다.

Answer 2

뭘 쫓고 것은이 clearfix (2)

예컨대 ,.

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

Answer 3

기존 <div id="content">에게 청산 CSS 속성을 부여 할 수 있습니다 :

#content{ 
    clear:both; 
}