[CSS] float과 clear:both 속성
float 속성 float 속성을 사용하면 해당 속성이 적용된 컨텐츠가 블록 내부의 좌측 또는 우측에 붙게되고 다른 컨텐츠들이 float 속성이 적용된 컨텐츠 주변을 감싸게 된다. 기본형: float: left l right l none left -> 해당 요소를 문서의 왼쪽에 배치한다. right -> 해당 요소를 문서의 오른쪽에 배치한다. none -> 좌우 어느쪽으로도 배치하지 않는다. float을 사용하면 아래의 이미지와 같이 float 속성이 적용된 요소의 그 주변을 다른 요소가 감싸게 된다. clear 속성(float 속성 해제하기) float 속성을 사용하면 float 속성을 적용한 요소 다음에 오는 요소들에도 속성이 전달된다. 따라서 float 속성이 적용된 컨텐츠 다음에 오는 컨텐츠들이 감싸는것을 원치 않으면 clear 속성을 사용해서 속성이 적용되지 않도록 할 수 있다. float: left; 였다면 clear:left; 사용하여 무력화 float: right; 였다면 clear:right; 사용하여 무력화 위처럼 사용하면 float 속성을 무효화 시킬 수 있다. 이외에도 float 속성 값과 상관없이 무조건 기본상태로 되돌리고 싶다면 clear: both; 속성을 사용하면 된다. 예시) <! DOCTYPE html > < html lang = "ko" > < head > < meta charset = "utf-8" /> < title > float & clear </ title > < style > div { padding : 20px ; margin : 10px ; } .box1 { background : #ffd800 ; float : left ; } .box2