float 레이아웃 이해하기

float 으로 만든 레이아웃 이해하기

 

float는 일반적으로 요소들이 나란히 놓이도록 웹 사이트의 전체 레이아웃을 만드는데 널리 사용되어 왔다.

 

float: left;

 

 

 

 

 

▶정렬이 필요한 가운데 부분의 요소에 float:left;속성을 쓴다.

 

 

 

 

 

▶float: left;속성을 준 요소들의 바로 다음 요소에 clear: both; 속성을 주어야 예시 처럼 float(떠오른)된 공간으로 다음 요소가 밀어올라 가는 것을 방지할 수 있다.

.clearfix::before,
        .clearfix::after {
            display: block;
            content: "";
            line-height: 0;
        }
        .clearfix::after {
            clear: both;
        }

▶또는 float: left;를 쓴 요소들을 감싸고 있는 태그에  .clearfix를 주어 float의 뜬 공간을 보완해 줄 수 있다.

 

 

 

 

 

▶float:left;를 쓰기 전에 요소들은 block형태로 쌓아 올려진다