ul 태그에 대해 overflow : hidden do 무엇을합니까?

Question

이 글에서 방향을 사용하여 다중 열 목록을 만드는거야 :

HTML :

http://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/

간단히 말해서, 그것은이의 라인을 따라 뭔가를 말한다

<div class='block'> 
    <ul> 
    <li> 
     Item1 
    </li> 
    <li> 
     Item2 
    </li> 
    <li> 
     Item3 
    </li> 
    </ul> 
</div> 

CSS :

.block { 
    border: 1px solid black; 
    padding: 10px; 
} 
.block ul { 
    width: 100%; 
    overflow: hidden; 
} 
.block ul li { 
    display: inline; 
    float: left; 
    width: 50%; 
} 

,

그리고 멋지게 작동하지만 오버플로 : 숨겨진 CSS 선언에 정신이있었습니다. 그것없이

, 내 외부 사업부는과 같이 붕괴 :

http://jsfiddle.net/alininja/KQ9Nm/2/

:

가 포함되어있어

http://jsfiddle.net/alininja/KQ9Nm/1/

는, 외부 사업부는 내가 원하는 얼마나 정확히 동작 왜 오버플로 : 숨겨진이 동작을 촉발 궁금하네요. 외부 div를 필요한 높이로 확장하지 않고 내부 li 항목을 잘랐 으면합니다.

감사합니다.

Answer 1

오버 플로우가 숨김, 스크롤 또는 자동으로 설정되어 있지 않으면 그 내부에있는 내용이 잘리지 않습니다. 이 메소드의 진정한 마법은 요소에 설정된 높이를 지정하지 않고 오버 플로우를 숨김으로 설정하면 내부 요소의 높이를 사용한다는 것입니다.

여기에서는 img이 떠 다니기 때문에 div가 img 주위를 둘러 보지 않습니다.

<div><img style="float:left;height:100px" /></div> 

여기서 div는 적절한 오버플로가있는 img의 높이를 현재 실현합니다.

<div style="overflow:hidden"><img style="float:left;height:100px" /></div> 

당신은 그것을 설정 높이를 제공했다 후 오버 플로우 설정은 달리 바깥쪽으로 넘쳐 것 아무것도 잘라 것이다 숨겨진합니다.

<div style="overflow:hidden;height:50px"><img style="float:left;height:100px" /></div> 

많은 경우에 이러한 기술을 사용하면 clear:both 유형의 추가 마크 업을 피할 수 있습니다.

Answer 2

overflow: hidden;에는 플로팅 된 li이 포함됩니다. overflow: hidden;은 새로운 블록 서식 지정 컨텍스트를 만듭니다.이 컨텍스트는 고유 한 블록 서식 지정 컨텍스트가있는 요소이며 부동 소수점을 포함합니다. 오버 플로우와 Adding CSS border changes positioning in HTML5 webpage

Answer 3

:, 내용이 UL의 크기를 밀어/운전하지 않는 숨겨진

나는이 좀 더 설명 여기에 StackOverflow에 다른 답변을 가리 것이다. UL 치수는 내용이 내부에 들어 있는지 여부를 무시하고 무시합니다.

오버플로가 없음 : 내용과 동작이 숨겨져있어 UL의 전체 크기를 늘릴 수도 있고하지 않을 수도 있습니다. 이것은 주로 UL이 그 내용에 의해 경계가 설정/영향을받는 컨테이너에 가깝기 때문입니다. 오버플로가 숨겨진 상태에서 UL은 컨테이너가 아닌 오버라이드 크기의 뷰포트로 더 많이 작용합니다.