예 :float가 clear div에 지정되었을 때 부모 컨테이너의 경계가이를 인식하지 못하는 이유는 무엇입니까?
HTML은
는<div id = parent>
<div class = "clearDiv"></div>
</div>
CSS 다음 float: left 재산권 지정된으로
div.clearDiv
{
width: 1000px;
height: 1px;
float: left;
clear: both;
visibility: hidden;
}
는 부모 DIV 그것을 인식하지 못하는 경우 상기 따라서 상위 DIV의 #parent는 높이를 가지 꽤 제로입니다, 왜?
overflow:auto; CSS 스타일을 상위 컨테이너 요소로 설정하십시오.
상위 컨테이너의 경우 상위 컨테이너에는 수치 정보가 제공되지 않습니다. 그들은 단지 형제 (또는 다른 떠 다니는 요소)와 상호 작용합니다. 따라서 float. 그들은 무엇이든, 어디서나 그리고 어떤 크기의 것이 될 수 있습니다. 컨테이너가 뜨기 때문에 컨테이너가 정말로 신경 쓰지 않습니다 ...
실제로 부모에게 과부하가없는 더 나은 접근법이 있습니까? 창 크기가 작아 질 때 스크롤 막대의 부모 컨테이너를 만들 것이라고 말합니다. 나는 원하지 않습니다. – dave
상위 요소가 스크롤 막대를 가져 오지 않도록하려면 항상 오버플로를 'visible'로 설정할 수 있습니다. 그러나 나는 여전히 '자동차'가 트릭을 잘한다고 생각한다. 내용이 윈도우의 뷰포트보다 크면 전체 문서에 div가 아닌 스크롤바가 생깁니다. –
'float'을 사용하면 플로팅 된 요소를 일반 페이지 플로우에서 가져옵니다. 요소의 조상/상속 관계는 유지되지만 포함 관계는 끊어집니다. –