플로트 이후 요소의 상단 여백이 때때로 사라지는 이유는 무엇입니까?

플로트 후 HTML 요소의 무시되는 상단 여백

웹 개발에서는 요소를 나란히 배치하기 위해 플로트를 사용하는 것이 일반적입니다. 그러나 부동 요소가 있는 경우 특정 브라우저에서는 후속 요소의 상단 여백을 무시할 수 있습니다.

이 동작은 부동 요소가 문서의 일반적인 흐름에서 제거되어 후속 블록이 발생하기 때문에 발생합니다. -float가 존재하지 않는 것처럼 흐르는 레벨 요소. 이로 인해 지정된 위쪽 여백이 있음에도 불구하고 두 번째 요소가 첫 번째 요소에 시각적으로 인접해 있을 수 있습니다.

다음 예를 고려하세요.

<div>
<p>이 시나리오에서는 두 번째 div가 예상됩니다. 첫 번째 항목과 90px 상단 여백으로 구분됩니다. 그러나 Firefox 또는 IE8에서는 두 번째 div가 첫 번째 div에 닿는 것처럼 보입니다.</p>
<p><strong>해결책: 내부 공백으로 래핑</strong></p>
<p>이 문제를 해결하려면 일반적인 해결책은 두 번째 div를 다른 요소 내에 래핑하는 것입니다. 이 래퍼 요소는 두 번째 div와 부동 요소 사이의 버퍼 역할을 합니다. 또한 래퍼의 공백은 여백이 아닌 패딩을 사용하여 지정해야 합니다. 이렇게 하면 패딩이 외부 요소의 영향을 받지 않게 됩니다.</p>
<p>예의 수정된 버전은 다음과 같습니다.</p>
<pre class="brush:php;toolbar:false"><div><p>이 수정을 통해 래퍼 요소는 상단에 90px 패딩을 설정합니다. , 의도한 대로 두 번째 div를 부동 요소에서 효과적으로 분리합니다.</p></div>