플로팅 요소가 상위 컨테이너 너머로 확장되는 이유는 무엇입니까?

플로팅 요소가 포함 Div를 넘어 확장되는 이유

div 내에서 요소에 플로트가 주어지면 요소는 div의 경계를 넘어 확장될 수 있습니다. div. 이는 플로팅 요소가 문서의 일반적인 흐름에서 제거되어 해당 요소에 인접하지 않고 다른 요소 주위에 배치되기 때문에 발생합니다. 결과적으로 포함하는 div의 너비에 영향을 미치지 않습니다.

플로팅 항목을 늘리는 솔루션

1. Overflow:hidden

쉬운 해결책은 상위 div에 Overflow:hidden을 추가하는 것입니다. 이렇게 하면 상위 경계를 벗어나는 모든 항목이 숨겨집니다.

#parent { overflow: hidden }

2. 부동 상위 Div

또 다른 옵션은 상위 div도 부동시키는 것입니다.

#parent { float: left; width: 100% }

이렇게 하면 상위 div가 부동 요소처럼 동작하게 되어 부동 하위 요소가 해당 div에 영향을 미칠 수 있습니다. 키.

3. 클리어 요소

클리어 요소를 활용하면 문제를 해결할 수도 있습니다.

<div class="parent">
  <img  class="floated_child lazy" src="/static/imghwm/default1.png" data-src="..." alt="플로팅 요소가 상위 컨테이너 너머로 확장되는 이유는 무엇입니까?" >
  <span class="clear"></span>
</div>

span.clear { clear: left; display: block; }

클리어 요소는 플로팅된 하위 요소의 흐름을 중단하여 아래쪽으로 밀어냅니다. 상위 div의

위 내용은 플로팅 요소가 상위 컨테이너 너머로 확장되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!