CSS에서 부동 요소 다음에 내 위쪽 여백이 무시되는 이유는 무엇입니까?

플로팅된 요소 이후 상단 여백이 무시됨: CSS 흐름 이해

div의 상단 여백을 신중하게 정의했음에도 불구하고 다음과 같은 경우 여백이 무시되는 시나리오가 발생할 수 있습니다. 이전 div가 부동됩니다. 이 동작은 부동 요소가 일반 흐름 외부에 있는 것으로 간주된다는 CSS 사양에서 비롯됩니다. 결과적으로 부동 요소 앞이나 뒤에 생성된 위치 지정되지 않은 블록 요소는 부동 요소가 존재하지 않는 것처럼 동작합니다.

예제 코드

다음 HTML 코드를 고려하세요.

<div> <p>이 예에서 두 번째 div의 여백 상단은 90px입니다. 그러나 Firefox 및 IE8에서는 눈에 띄는 상단 여백 없이 두 번째 div가 첫 번째 div에 닿는 것처럼 보입니다.</p>
<h3 id="해결책-래퍼-만들기">해결책: 래퍼 만들기</h3>
<p>이 문제를 해결하려면 간단하고 효과적인 해결책은 두 번째 div를 다른 div 내에 래핑하는 것입니다.</p>
<pre class="brush:php;toolbar:false"><div>
<p>이 수정된 코드에서 래퍼 div의 padding-top 속성은 래퍼와 그 내용. 중요한 점은 이 패딩이 내부적으로 적용된다는 것입니다. 즉, 플로팅된 div와 같은 외부 요소에 영향을 주지 않습니다. 결과적으로, 일반 흐름에서 플로팅 div의 간섭에도 불구하고 이제 두 번째 div는 플로팅 div와 적절하게 분리됩니다.</p>
<h3 id="결론">결론</h3>
<p>CSS 흐름과 플로팅 요소의 영향을 파악하는 것은 레이아웃 디자인에 있어서 매우 중요합니다. 이러한 개념을 이해하고 요소를 내부 패딩으로 래핑하는 등 적절한 솔루션을 사용하면 부동 요소가 있는 경우에도 웹페이지가 의도한 대로 표시되도록 할 수 있습니다.</p>
</div>