float 속성

 

레이아웃을 정렬하는 방법에대해 알아볼까합니다.

좌우 정렬을 위한 속성으로는 세가지가 있는데요.

 

첫번째, 이번글의 주제인 float입니다.

두번째, inline-block이 있고요.

세번째, flex가 있습니다.

 

이 셋 모두 css에서 좌우정렬이나 배치를 할 수 있는 속성입니다.

그중 제가 현재 가장 많이 사용하고 있는 float에 대해 설명할까 합니다.

 

float는 레이아웃 정렬을 위해 제가 가장 많이 사용하는 속성인데요

속성 값으로 lfet(왼쪽띄움);right(오른쪽띄움);none(기본) 이 있습니다.

 

사용방법

<style>
     ul>li{height:155px; line-height:155px; list-style-type: none; text-align:center;}
     .a1{float:left; width:49%; border:1px solid #3e3e3e;}
     .a2{float:left; margin-left:1%; width:49%;border:1px solid #3e3e3e;}
</style>

<ul>
    <li class="a1">안녕하세요</li>
    <li class="a2">반갑습니다</li>
</ul>

 

- 예제

https://codepen.io/seozzz/pen/yLBRWqE

 

 

이렇게 좌우정렬이 되는데요

여기서 반드시 whidth 값이 존재해야 합니다.

그리고 주의할 점!!

float를 하면 height 값이 망가집니다. (안잡혀요!!)

이를 위해 부모값에 after 가상선택자를 만들어 clear:both를 꼭꼭꼭!! 해주어야 합니다.

 

 

<style>
     ul>li{height:155px; line-height:155px; list-style-type: none; text-align:center;}
     ul::after{content:''; display:none; clear:both;}
     .a1{float:left; width:49%; border:1px solid #3e3e3e;}
     .a2{float:left; margin-left:1%; width:49%;border:1px solid #3e3e3e;}
</style>

<ul>
    <li class="a1">안녕하세요</li>
    <li class="a2">반갑습니다</li>
</ul>

 

이렇게 코드를 작성하며 레이아웃을 잡아 주는것이 좋습니다.

보통 페이지를 하나 만들면 정렬이 많으니 저는 clear속성을 공통으로 만들어서 사용합니다.

 

<style>
     .claerfix{width:100%;}
     .claerfix::after{content:''; display:none; clear:both;}
    
      ul>li{height:155px; line-height:155px; list-style-type: none; text-align:center;}
     .a1{float:left; width:49%; border:1px solid #3e3e3e;}
     .a2{float:left; margin-left:1%; width:49%;border:1px solid #3e3e3e;}
</style>

<ul class="claerfix">
    <li class="a1">안녕하세요</li>
    <li class="a2">반갑습니다</li>
</ul>

저렇게 부모값에 claerfix라는 클래스만 추가해주면 일일이 코드를 만들지않고 편하게 사용가능하겠죠

 

 

반응형때 한줄로 다시 배치하려면 어떻게 해야할까요?

 

float:none; 을 사용하는 방법도 있지만

저같은경우엔 간단하게 width값을 100%;로 주어 풀어줍니다.

 

 

float

사용하기 편리한 속성이죠!

저도 위의 세정렬속성 중 가장 많이 쓰는 속성입니다.