어떻게 오버플로 : 숨겨진 작품 떠 다니는 요소를 감싸고 작품?

Question

나는 overflow : hidden을 사용할 때 약간 혼란 스럽다. 부모 엘리먼트가 다른 엘리먼트를 감싸고 있는지 확인하기 위해 숨김. 나는 항상 분명함을 사용했다 : 둘다; 그것을하기 위해 div하지만 의미 상 많은 의미를 부여하지는 않습니다. 누구나 오버플로 방식을 설명 할 수 있습니까? 숨겨진 부모 div는 마술입니까? 그리고 언제 우리는이 기술을 맑은 것보다 선호해야합니까? 두 가지 방법 모두?

건배!

Answer 1

보이지 않는 부분이 오버플로되면 플로트를 지우는 새로운 블록 서식 지정 컨텍스트가 작성됩니다.

Answer 2

우리가 플로트 사용 : 왼쪽, 그 문제는 우리가 분명히 사용하는 것을 방지하기 위해 부유 요소 옆에 올 것이다 다음 요소에 대한 충분한 공간이있을 때 : 두

예 :

<style> 
#wrapper{ 
width:500px; 
} 

#one{ 
width:100px; 
float:left; 
} 

#two{ 
width:100px; 
float:left; 
} 

#three{ 
width:100px; 
} 

.clearfix{ 
clear:both; 
} 

</style> 


<div id="wrapper"> 
    <div id="one"></div> 
    <div id="two"></div> 
    <div id="three"></div> 
</div> 

위의 상황에서 전체적으로 500px 공간이 있고 그 중 두 div는 200px 공간을 사용했으며 300px 공간이 있고 dv 3은 100px입니다. 그래서 div 3은 div 2 옆으로 갈 것이며 충분한 공간이있을 것입니다. 이를 피하려면 다음 두 가지를 모두 사용하여 div를 입력하십시오.

<div id="wrapper"> 
    <div id="one"></div> 
    <div id="two"></div> 
    <div class="clearfix"></div> 
    <div id="three"></div> 
</div>