HTML에서 부동 요소 다음에 상단 여백이 작동하지 않는 이유는 무엇입니까?

플로팅 요소 다음에 HTML 요소의 상단 여백이 무시되는 이유는 무엇입니까?

CSS에서는 플로팅 요소가 문서의 일반 흐름에서 제거됩니다. 다른 요소로 둘러싸세요. 그러나 이 동작은 float 뒤의 요소에 상단 여백을 적용하려고 할 때 예상치 못한 결과를 초래할 수 있습니다.

CSS 사양에 따르면 "Float가 흐름에 없기 때문에 위치가 지정되지 않은 블록 상자는 마치 플로트가 존재하지 않는 것처럼 플로트 상자 흐름이 수직으로 흐르기 전후에 생성됩니다." 결과적으로 후속 요소의 상단 여백은 브라우저 계산에서 기본적으로 무시됩니다.

이 문제를 해결하기 위한 일반적인 접근 방식은 후속 요소를 컨테이너로 래핑하고 여백 대신 래퍼에 패딩을 적용하는 것입니다. 요소에. 이렇게 하면 외부 요소와 독립적으로 유지되는 내부 공백이 효과적으로 생성되어 상단 여백이 예상대로 작동할 수 있습니다.

예:

아래 샘플 HTML 코드에서 플로팅

후속

의 여백을 방지합니다. 적용:

<div>
<p>이 문제를 해결하려면 후속 </p>
<div> 대신 래퍼에 패딩을 적용합니다.<pre class="brush:php;toolbar:false"><div><p>이 기술을 활용하여 플로팅 요소와 후속 요소 사이에 "버퍼"를 효과적으로 생성하여 상단 여백이 적절하게 적용되고 시행됩니다.</p></div>