CSS float를 정리하면서

float

요소의 수평정렬을 위해 많이 사용했지만

flex가 생김으로인해 사용이 많이 줄어들었다.

 

 

border : 4px solid;

border 속성에 색상을 지정안하면 텍스트 색상을 따라간다.

 

float의 주의점

1. float의 마지막요소에 float을 더이상 사용하지않겠다는 해제 속성을 넣어야한다.

만약 넣지 않으면 원하는 방향으로 출력되지않는다.

clear: left;

하지만 위 방법은 필요없는 마지막요소가 있어야하기 때문에 적절하지 않다.

 

overflow : hidden;

 

 

 

가상요소 ::after

 

 

3. float한 요소는 float한 요소끼리만 있어야 한다.

 

 

일치 선택자

div.container{
	color : pink;
}

선택자와 선택자가 붙어있는 형태를 일치 선택자라 한다.
위 코드는 div태그이면서 class의 이름이 container인 요소를 선택한다.

 

4. float :rigth는 요소의 순서가 오른쪽에서부터 시작한다.

- 해결 방법은 div를 한번 더 감싸서 상위 div에는 rigth속성을 하위 div에는 left속성을 준다.

 

CSS 개발 방법론이란?

 

 

 

float 속성을 주면 해당 속성은 자동으로 display: block으로 바뀌게된다. ( 일부의 경우에)

display가 flex나 inline-flex, grid와 같은 경우에는 일부의 경우로 바뀌지않는다.

 

 

 

display 속성

 

display: block

-

display: inline

-