[CSS] float, clear:both 속성 이해하기

최근에 리액트를 배우면서 프로젝트를 진행하고 있는데

clear both라는 생소한 코드를 보게되었다

 

뭐하는 녀석인지 궁금해졌으니 간단하게라도 정리하고 기록해두자

 

자 나름대로 정리를 해보자면

 

프론트쪽 개발을 하면서 float 속성을 자주 접하게되는데

float이라는 속성은 웹요소들을 문서위에 떠있게 만드는 능력을 가지고 있는 녀석이다

 

float:left 왼쪽으로 배치

float:right 오른쪽으로 배치

float: none 좌우 어느쪽으로도 배치하지 않는다

 

앞서 설명한 것 처럼

 

float:left는 순서대로 왼쪽부터 가로로 정렬되고

 

rigth는 오른쪽부터 왼쪽으로 1~4번 순서대로 정렬된다

 

자 그렇다면 만약 1번~4번을 왼쪽정렬 또는 오른쪽 정렬이 아니라

 

이런식으로 1번 2번 아래에 3번 4번으로 정렬하려고 할 때

 

우리에게 도움을 주는 녀석이 바로 clear:both이다

 

1번과2번에 float:left를 주고

3번에 float:left를 주고 동시에 clear:both 속성을 부여하면

바로 아래에 왼쪽으로 붙게된다

4번은 똑같이 float:left를 주게되면 위 이미지처럼 12다음 34가 나오게 만들 수 있다

 

 

 

<div className={'t1'}>1</div>
<div className={'t2'}>2</div>
<div className={'t3'}>3</div>
<div className={'t4'}>4</div>

이렇게 테스트용 박스4개를 만들고 

.t1,.t2,.t3,.t4{
    width: 50px;
    height: 50px;
    border: 1px solid black;
}

 

 

육안으로 보이도록 간단한 css를 주고 출력하면

 

이렇게 왼쪽에 딱 붙어서 세로로 출력되는데

 

이때 가로로 출력하기위해서 

 

css에 float:left 를 주면

 

 

이렇게 가로로 펼쳐지도록 할 수 있다

 

자 이제 여기서 1,2번은 그대로 가로로 나타내고

3,4번은 아랫줄에 나오도록 하기위해

 

우리는 clear:both를 사용해야한다

 

최종코드는 

 

.t1,.t2,.t3,.t4{
    width: 50px;
    height: 50px;
    border: 1px solid black;
    float: left;
}
.t3{
    clear:both;
}

 

이렇게 작성하고 결과를 보면

 

우리가 원하던대로 1,2 그리고 아래에 3,4가 출력되게 만들었다

 

앞으로 레이아웃이나 디자인을 할 경우 

위 예시를 응용해서 화면에 나타내면 될 것 같다

 

작은 부분이고 기본적일지라도 시간을 내서 정리하고 

기록하는 습관을 만들면 좋을 것 같다

 

나중에 내가 보고도 이해할 수 있도록 작성하려고 노력해보자

 

float 속성과 clear:both에 대해 알아보았다

 

clear:left 와 clear:right도 있지만 하나하나 기억하기 힘들어서

 

보통 both를 사용한다고한다 내 생각에도 그게 좋을 것 같다