div를 div 안에 추가하지만 왼쪽으로 떠 밀리는 방법은 무엇입니까?

Question

는 I는 b_content 상기 I이 CSS 코드

#b_container 
{ 
    margin-right: auto; 
    margin-left: auto; 
    background: red; 
    width:900px; 
    padding: 10px; 
} 

#b_header{ 
    background: #FFF; 
    padding: 5px; 

} 
.header_left{ 
    float: left; 
    width:100px; 
    background: #CCCC00; 

} 
#b_footer{ 
    background: #FFF; 
    padding: 5px; 
} 
#b_content{ 
    background: #00FFFF; 
    padding: 5px; 
    height: 100px; 
} 

사용하지만 결과 (클래스 header_left으로) 세 된 div 도시이 HTML 코드

<div id="b_container"> 
    <div id="b_header"> 
     <div class="header_left"><a href="#">link 1 </a></div> 
     <div class="header_left"><a href="#">link 2 </a></div> 
     <div class="header_left"><a href="#">link 3 </a></div> 
    </div> 
    <div id="b_content">content goes here</div> 
    <div id="b_footer">footer goes here</div> 
</div> 

있다. 왜 ?

Answer 1

div (부동 소수점 header_left)에서 부동을 중지해야합니다. 당신은 #b_header에 다음 줄을 추가로 작업을 수행 할 수 있습니다

overflow: hidden; 

또한이 example를 참조하십시오.

대안은 clear: both; 인 빈 div를 id가 b_header 인 div에 마지막으로 추가하는 것입니다. 이 example을 참조하십시오.

Answer 2

그러나 결과는 b_content보다 위에 세 개의 div (클래스가 header_left 인 경우)를 보여줍니다. 왜 ?

이

당신이 수레를 삭제하지 않기 때문에, 당신은 overflow:hidden 속성을 사용하거나 부모 div 컨테이너의 마지막 자식으로 clear:both 속성 사업부를 추가함으로써 그렇게 할 수있다.

Answer 3

기본적으로, flaots를 사용하여 삭제해야하며이으로 div을 작성하면됩니다.

그 트릭을해야합니다.

플로트에 대해 자세히보기 here