2010-01-29 7 views
1

플로팅 된 요소를 언제 제거해야하는지 설명 할 수 있습니까?언제 떠 다니는 HTML 요소를 정확히 지워야합니까?

내가 HTML로 무엇인가를 만들 때 나는 눈치 챘다. 나는 그것을 지우지 않았다.

overflow:hidden도 삭제 대체품으로 사용할 수 있습니까? 이 예에서

봐는 :

여기
<html> 
<head> 
    <style> 
    .a { background-color: red; overflow: hidden } 
    .floated-left { float: left; width: 100px; height: 100px; background-color: blue; } 
    </style> 
</head> 

<body> 
    <p>div with class a, that does have overflow:hidden:</p> 
    <div class="a"> 
    <div class="floated-left">Hi,</div> 
    <div class="floated-left">Mom!</div> 
    </div> 

    <p>i didn't clear anything</p> 
</body> 
</html> 

나는 떠 div의 선택을 취소하지만 .a 클래스 overflow:hidden을 설정하고 <p> 아래의 일반 요소 흐름에 출연하지 않았다.

그러나 .a 클래스에서 overflow:hidden을 제거하면 <p>이 옮겨집니다.

설명 해주십시오!

감사합니다. Boda Cydo.

답변

4

는 상기 element's height는 그 후손 (CSS 2.1 § 10.6.6)에 의존한다. 따라서 .aoverflow: hidden을 설정하면 떠 다니는 자손을 포함하도록 확장됩니다. <p>.a 이하이므로 수레 아래에 있습니다.

overflow: hidden이없는 경우, .a에는 플로팅 된 하위 항목이 없습니다. 계산 된 높이는 0입니다. <p>은 여전히 ​​.a 아래이지만 수레는 아닙니다. 플로트는 <p> 인라인 컨텐츠를 푸시합니다.

.a 및 단락의 테두리를 두어 차이점을보다 명확하게 확인하십시오.

3

overflow: hidden은 가능한 한 언제나 div를 지울 수있는 대체 수단으로 사용해야합니다.

+1

참조 : http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/ – outis

+0

우리는 또한 수레의 부모를 늘리는 것과 구별하는 것을 구분할 수 있습니다. – outis

+0

http : // blue-anvil을 참조하십시오.co.kr/archives/experiments-with-floats-whats-the-best-method-of-clearance/ – cletus

2

타이어 블록 주변의 요소를 단위로 떠올리게하고 포함하는 요소를 높이 중 수직으로 확장해야하는 경우. 그렇지 않으면 인접하지 않은 인접 요소의 text/inline 요소가 float 주위로 흐릅니다. 이 내용이 플로트보다 높으면 용기가 좋아질 것입니다. 그러나 부유 한 elemnt가 더 키 큰 경우에, 당신은 콘테이너가 부유물처럼 키 큰 경우에 당신은 그것을 맑게 할 필요가있다. overflow가 "표시"로 설정되지 않으며 height이 "AUTO"가 아닙니다 블록 레벨, 비 치환 소자 용

1

다른 게시물 When should overflow:hidden be used for a <div>?에서 내가 대답 한 것처럼 div의 하위 요소는 여백을 벗어났습니다. 오버플로가 표시되는 것 이외의 다른 것이기 때문입니다. 오버플로가 표시되면 기술적으로 div의 경계에서 '엄마!'에 대해 중단됩니다. 그것이 보이지 않는 경우 (overflow, scroll, auto) 경계는 자신의 부모 (이 경우 브라우저의 오른쪽 가장자리)의 경계에 도달 할 때까지 계속됩니다. 새로운 블록 요소는 들어갈 공간이 생길 때까지 시작되지 않을 수 있습니다. 오버 플로우가 표시 될 때 효과적입니다. 마지막으로 float 된 div의 여백 경계 바로 뒤에 시작할 수 있습니다. 그것이 다른 경우 div에서 전체 휴식을 기다려야합니다.

+0

도와 주셔서 감사합니다! 나는이 물건을 지금 이해한다! – bodacydo

관련 문제