div태그에 float를 적용 시 div 해당 요소의 margin이 사라지고, float라는 이름처럼 div 해당 요소를 띄어지면서

div의 다음요소들이 위로 올라가진다.

 

그리고 문제가 되는 점은,

 

<header>

<div="a_float">

</div>

<p>장문의 글</p>

</header>

 

a_float의 css로 float가 적용되었을 때,

그 다음 요소인 <p>가 위로 올라가지고 그리고 header 태그의 영억을 넘어 범람하게 된다.

 

그때 header의 범람하는 요소를 막기 위해 아래와 같은 css를 적용해보자

 

p::after{

content:" ";

display:block;

clear:both;}

 

 

반응형

+ Recent posts