개발 공부/CSS
float 사용하여 기본 레이아웃 만들기
차정
2022. 7. 4. 11:04
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 CSS 속성은 요소가 선행 부동(floating) 요소 다음일 수 있는지 또는 그 아래로 내려가(해제되어(cleared))야 하는 지를 지정합니다. clear 속성은 부동 및 비부동 요소 모두에 적용됩니다.
developer.mozilla.org
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>