높이가 0 인 스타일의 div 렌더링

Question

나는 며칠 전 매우 성가신 문제에 부 닥쳤다. 나는 다음과 같은 구조의 웹 사이트에 일하고 있어요 :

[헤더]
[메뉴 스트립]
[특집 물건]
[내용]
[바닥 글]

(이 모든 수평이다 이 순서대로 동일한 고정 너비로 ​​서로의 아래에있는 div를 중심으로)

나중에 "내용"부분의 내용을 변경합니다. "내용"div 안에는 다른 div가 있으며 때로는 고정 된 높이가 있고 때로는 그렇지 않을 수도 있습니다.

여기에 문제가 있습니다. 선언 된 높이가없는 "내용"에 다른 div를 넣을 때마다 내부 div가 0px로 렌더링됩니다. 내부 div에 선언 된 높이를 가진 요소가 있는지 여부는 중요하지 않습니다. 선언 된 높이와 함께 작동하지만 내용의 높이를 항상 알 수 있다고 보장 할 수는 없습니다.

이 문제의 원인은 무엇일까요?

Answer 1

div 안에있는 요소가 떠있을 때 이것은 clearfix과 같이 들립니다. float 된 요소가 컨테이너 박스 내에있을 때

문제가 발생, 그 요소가없는 자동 힘 컨테이너의 높이가 떠내려 요소에 적응 않습니다. 요소 이 플로트 된 경우 플로트는 이 플로우에서 제거 되었기 때문에 더 이상 부모가 아닌 의 부모가 포함합니다.