css float와 position

float:요소를 좌우 방향으로 띄움 (주로 수평 정렬을 할 때 사용된다.)
기본값 : none
float를 사용하면 대부분 그 요소는 display가 block으로 바뀐다. 단 flex, inline-flex, grid는 제외

float의 속성값

none: 요소 띄움 없음
left: 왼쪽으로 띄움
right:오른쪽으로 띄움
ex1 수직으로 쌓인 요소를 수평으로 정렬한 예시)

<style>
    ul.left-bar li{
     float: left;
     margin-right:5px;
     background-color: red;
     padding:10px;
    }
  </style>
 
   <ul class="left-bar">
     <li class="item1">home</li>
     <li class="item2">about</li>
     <li class="item3">information</li>
     <li class="item4">community</li>
   </ul>

float를 사용하면 float를 사용한 요소 주변으로 text가 붙는다 
ex2 float를 사용한 요소 주변으로 text가 붙는 현상에 대한 예시 )

<style>
    .box1{
      width: 200px;
      height: 200px;
      background-color: blue;
      float: left;
    }

  </style>
 
 <div class="box1"></div>
<article>
  Lorem ipsum dolor sit amet consectetur adipisicing elit.
  Maiores quidem voluptates sequi hic aut quasi minima obcaecati eius porro quisquam.
  Culpa libero suscipit aperiam minus nisi asperiores molestiae atque porro.
  Lorem ipsum dolor sit amet consectetur adipisicing elit.
  Consectetur aperiam molestiae libero tempora eligendi veritatis voluptatum debitis 
  cum rerum excepturi consequuntur eveniet, maiores aspernatur. Nostrum inventore labore esse 
  molestias deleniti!
</article>

위 코드를 확인해보면 요소 주변으로 text가 붙는 것을 확인할 수 있다. 

clear : float를 해제하는 기능이 있다  
float는 사용하기 까다로울 수 있다. float로 요소를 띄워 수평 정렬하거나, 요소 주변에 텍스트를 붙이고 싶을 때 주로 사용되는데 float는 다음에 작성된 요소에 영향을 주기 때문에 
사용이 끝난 후에 clear를 사용하지 않으면 주변 요소가 float에 영향을 받아 문제가 생길 수 있다

clear를 사용해 float를 해제하는 방법 

1.float사용완료 후 다음 형제 요소에 아래 내용을 추가한다.  
단점:다음 요소가 없을 경우 새로운 요소를 만들어줘야 한다

left: float의 속성 값으로 left를썻을때 float의 기능을 해제한다 
right: float의 속성값으로 right를썻을때 float의 기능을 해제한다
both: float의 속성 값이 left이던 right이던 float의 기능을 해제한다.

2. 부모 요소에 clearfix클래스를 추가한다.:
1번 방법을 보완한 방법이다 ::after은 가상 요소 선택자로써 요소 마지막에 가상에 요소를 생성한다 즉 1번에 다음 요소가 없는 경우를 해결한 것이다
content는 내용이 없어도 필수적으로 작성해야 한다 content가 없다면 동작하지 않기 때문이다
clear:both를 이용해 float를 해제한다
가상 요소 선택자 after은 display가 inline이기 때문에 display:block을 사용해 레이아웃을 잡기 위한 display를 원상 복구한다.

clearfix내용

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

ex)

<style>
    .box1{
      width: 100px;
      height: 100px;
      padding: 10px;
      background-color: red;
      float: left;
      
    }
    .box2{
      width: 100px;
      height: 100px;
      padding: 10px;
      background-color: blue;
      float: right;
    }
    .text{
      clear: both;
    }
  </style>
<div class="box1">1</div>
<div class="box1">2</div>
<div class="box1">3</div>


<div class="box2">1</div>
<div class="box2">2</div>
<div class="box2">3</div>
<p class="text">안녕하세요</p>

position :요소의 위치를 배치하는 기준을 설정한다. 이때 속성 값으로 absolute와 fixed가 쓰인 요소는 display가 block으로 바뀐다
기본값 :static 

position의 속성 값 

static: 기준 없음 배치가 불가능하다

relative: 요소를 이동시키는 기준이 자기 자신이다.
이때 본래 있던 자리에는 아무것도 없어 보이지만 존재하는 개념으로 보기 때문에 주변 요소의 영향을 줄 수 있다 
때문에 position: relative를 사용할 땐 주변 요소의 영향을 준다는 점도 고려하여 사용해야 한다.

★absolute:요소를 이동시키는 기준이 위치상 부모 요소이다.
위치상 부모 요소란? 
상위 요소 중 position이 명시된 요소를 위치상 부모요소라고 한다. 이때 상위요소중 position이 여러 부분에 명시되어있으면 가장 가까운 상위 요소가 위치상 부모 요소가 된다.
위치상 부모 요소의 position값은 주로 relative를 작성하는데 다른 position값은 위치기준이 변경될 수 있기 때문이다.
absolute는 relative와 달리 본래 있던 자리에 존재하는 개념이 아니라 요소 자체가 이동하기 때문에 주변 요소의 영향을 주지 않는다 

fixed:요소를 이동시키는 기준이 브라우저(뷰포트)이다
페이지를 스크롤하더라도  이동시킨 위치에 고정된다는 특성이 있다.

top, left, right, bottom: position으로 설정된 배치 기준으로 해당 값만큼 이동시킨다
기본값:auto(브라우저가 자동계산)

1 top: position으로 설정된 배치 기준으로 해당값만큼 요소의 윗부분이 아래쪽으로 이동한다.
px 또는 %(부모 요소의 세로 너비를 참조한다)로 값을 설정한다.

2 left: position으로 설정된 배치 기준으로 해당 값만큼 요소의 왼쪽 부분이 오른쪽으로 이동한다.
px 또는 %(부모 요소의 세로 너비를 참조한다)로 값을 설정한다.

3 right:position으로 설정된 배치 기준으로 요소의 오른쪽 부분이 해당 값만큼 왼쪽으로 이동한다.
px 또는 %(부모 요소의 세로 너비를 참조한다)로 값을 설정한다.

4 bottom:position으로 설정된 배치 기준으로 요소의 아랫부분이 해당 값만큼 위쪽으로 이동한다.
px 또는 %(부모 요소의 세로 너비를 참조한다)로 값을 설정한다.

ex)

 <style>
    div.parent{
      border: 5px solid red;
      width: 300px;
      height: 100px;
      display: flex;

    } /* 부모요소의 영역 표시 */ 
   
    div.item{
      width: 50px;
      height: 50px;
      background-color:blue;
      margin: 20px;
    }    /* 이동시킬요소들 */

    .relative{
      position: relative;
      top:20px;
      left: 150px;
    } /*자기자신을 기준으로(position:relative) 아랫쪽으로 20px 오른쪽으로 20px 만큼 이동한예시 */
    .absolute{
      position: absolute;
      top: 30px;
      left: 150px;
    } /* 위치상 부모요소(class가 parent인 div 태그)를 기준으로(position:absolute) 아랫쪽으로 30px 오른쪽으로 150px 만큼 이동한예시  */
    .fixed{
      position: fixed;
      top: 100px;
      left: 50px;
    }    /* 위치상 부모요소와 상관없이 브라우저(화면)을 기준으로 아랫쪽으로 100px 오른쪽으로 50px만큼 이동한 예시 */

  </style>

<div class="parent relative">
  <div class="item absolute">1</div>
  <div class="item fixed">2</div>
  <div class="item">3</div>
</div>

요소 쌓임 순서
z-index: z 축을 이용하여 요소가 겹치는 경우 화면에 어떤 요소가 우선시 보일지 설정한다. 값이 높으면 높을수록 다른 요소보다 우선하여 보인다.
기본값:0 

1 position속성을 사용한 요소는 다른 요소와 겹 칠경 우 가장 위에 쌓인다 단 static은 제외
2요소에 z-index값(기본값:0)이 높으면 다른 요소보다 우선하여 보인다