[CSS] <li> 태그에서 float속성 right일 때 행 나누는 방법

clear : both 사용

.left{ text-align : left; clear:both;}
.right{ text-align : right ;  margin-right : 20px; float:right ; clear:both;}

 

 

 

clear : both 미사용

.left{ text-align : left;}
.right{ text-align : right ;  margin-right : 20px; float:right ;}

 

 

* float

- 박스를 좌측이나 우측으로 붙이고 아래 내용이 그 주변을 흐르게 하는 속성

- float한 박스에 width값을 주어야 모든 구형 브라우저까지도 동일한 결과로 표현

 

* clear : both;

- float한 박스들의 바로 아래 박스에게 주변을 흐르지 않고 원래대로 배치하도록 하는 속성

- 이 요소는 블록이어야 함

 

=> float을 해제하지 않으면 박스의 배경이나 테두리 속성이 실행되지 않는다.

 

 

 

reference

float 한 뒤에는 꼭 clear:both; - brunch.co.kr/@xhrkdl2000/47