float 사용하여 기본 레이아웃 만들기

float 사용하여 기본 레이아웃 만들기 

 

See the Pen float 사용해서 기본 레이아웃 만들기 by JEONG (@cona) on CodePen.

float 

요소를 공중에 띄운다고 생각

(left와 content 모두 float:right 이면 left태그가 더 오른쪽에 보여진다)

 

 

 

clear : both

https://developer.mozilla.org/ko/docs/Web/CSS/clear

clear - CSS: Cascading Style Sheets | MDN

 

clear : right   

선행된 float가 right일때 float 효과 해제

 

clear : left 

선행된 float가 left일때 float 효과 해제

 

clear : both

선행된 float가 left든 right이든 모두 해제

 

 

 

* clear:both 준 박스에 margin-top이 적용 안되는 문제 해결위해 빈 div 박스에 clear:both 주는 해결방법도 있다.

<div class="container">
    <div class="header"></div>
    <div class="left"></div>
    <div class="content"></div>
    <div style="clear:both;"></div>
    <div class="footer"></div>
</div>