[입문] 웹 프론트 엔드 - 4주차 - float layout

float layout

CSS float layout 입니다.

layout 방법중 아마 가장 많이 사용되었던 녀석이지 않을까 하는데요.

float는 원래 layout을 위한 속성은 아니였습니다.

float는 영상에서 설명하는 바와 같이.

이미지와 텍스트를 정렬하기 위한 속성이였습니다.

하지만 하위 브라우저 지원이 가능하다는 점에서 널리 쓰이게 되었죠.

사용 하는 값은 아래와 같습니다.

.class{float:none | left | right}

• none 
  기본값이며 선언시 정렬되지 않습니다.
  
• left
  왼쪽을 기준으로 정렬됩니다.
  
• right
  오른쪽을 기준으로 정렬됩니다.

float는 layout을 위한 속성이 아니다보니 사용시 상위 엘리먼트가 사이즈를 가지지 못하는 현상이 발생합니다.

그래서 항상 clearfix를 해줘야합니다.

.clearfix::after{display:block;content:'';clear:both}

사용법은 아래와 같습니다.

<style>
.clearfix::after{display:block;content:'';clear:both}
p{float:left;width:100px}
</style>

<div class="clearfix">
    <p>1</p>
    <p>2</p>
</div>