Float (요소 정렬)

맹뿌·2021년 5월 31일

CSS 프론트엔드

CSS3

목록 보기

9/10

float 속성은 이미지와 텍스트가 있을 때, 이미지 주위를 텍스트로 감싸기 위해 만들어진 것
해당 속성을 사용할 때는 요소의 위치를 고정시키는 position의 absolute를 사용하면 안됨

float: none; : 요소를 떠있게 하지 않음 (기본값)
float: right; : 요소를 오른쪽으로 이동시킴
float: left; : 요소를 왼쪽으로 이동시킴

① 정렬

float: left; 를 사용하면 왼쪽부터 가로 정렬
float: right; 를 사용하면 오른쪽부터 가로 정렬
오른쪽 가로 정렬의 경우, 먼저 기술된 요소가 가장 오른쪽에 출력 (출력 순서 = 역순)

float 속성은 좌측, 우측 가로 정렬만 할 수 있으므로 중앙 가로 정렬은 margin 속성 사용해야 함

div {
  margin: 0 auto; /* 마진을 auto로 지정해주면 해당 요소를 브라우저 중앙에 위치시킬 수 있다 */
}

② width

width 프로퍼티값을 지정하지 않은 block 요소는 부모 요소의 가로폭을 가득 채움

width 속성을 선언하지 않은 block 레벨 요소에 float 속성이 선언되면
width가 inline 요소와 같이 content에 맞게 최소화되고 다음 요소 위에 떠있음

<head>
  <style>
    .box {
      color: white;
      font-weight: bold;
      font-size: 30px;
      line-height: 50px;
      height: 50px;
      margin: 0 10px;
      padding: 10px;
    }
    .d1 {
      float: left;
      background: red;
    }
    .d2 {
      background: orange;
    }
  </style>
</head>

③ float 속성 관련 문제 해결 방법

1. float 속성이 선언된 요소와 float 속성이 선언되지 않은 요소 간 margin이 사라지는 문제

float 속성을 선언하지 않은 요소에 overflow: hidden; 속성을 선언함으로 해결 가능

<head>
  <style>
    .box {
      color: white;
      font-weight: bold;
      font-size: 30px;
      line-height: 50px;
      height: 50px;
      margin: 0 10px;
      padding: 10px;
    }
    .d1 {
      float: left;
      background: red;
    }
    .d2 {
      overflow: hidden;  /* 이 부분을 추가하거나, d2 요소에도 float 속성을 선언해주면 해결 */ 
      background: orange;
    }
  </style>
</head>

2. float 속성이 선언된 자식 요소를 포함하는 부모 요소의 높이가 정상적으로 반영되지 않는 문제

float 속성이 선언된 자식 요소의 부모 요소에 overflow: hidden; 속성을 선언하여 해결 가능

<html>
<head>
  <style>
    .container {
      color: white;
      text-align: center;
      padding: 10px;
      background-color: #def0c2;
      overflow: hidden; /* 이 부분을 추가함으로써 해결 가능 */
    }
    .d1, .d2 {
      float: left;
      width: 50%;
      padding: 20px 0;
    }
    .d1 {
      background-color: #59b1f6;
    }
    .d2 {
      background-color: #ffb5b4;
    }
  </style>
</head>

::after 가상 요소 셀렉터를 사용하여 해결 가능. IE8까지 지원하는 CSS2 문법(:after)을 사용하는 것이 좋음. 가장 추천하는 방식.

<head>
  <style>
    .container {
      color: white;
      text-align: center;
      padding: 10px;
      background-color: #def0c2;
    }
    .clearfix:after {
      content: "";
      display: block;
      clear: both;
    }
    .d1, .d2 {
      float: left;
      width: 50%;
      padding: 20px 0;
    }
    .d1 {
      background-color: #59b1f6;
    }
    .d2 {
      background-color: #ffb5b4;
    }
  </style>
</head>

float 속성 대신 display: inline-block;을 선언하여 해결 가능. 하지만 inline-block 속성 요소를 연속으로 사용하는 경우에는 두 요소 사이에 정의하지 않은 공백(4px)이 자동 지정되는 것을 유의.

<head>
  <style>
    .container {
      color: white;
      text-align: center;
      padding: 10px;
      background-color: #def0c2;
      /* 폰트 사이즈를 0으로 지정하여 두 요소 사이에 정의하지 않은 공백을 제거 */
      font-size: 0;
    }
    .d1, .d2 {
      display: inline-block;
      width: 50%;
      padding: 20px 0;
      /* 폰트 사이즈를 재지정 */
      font-size: 1rem;
    }
    .d1 {
      background-color: #59b1f6;
    }
    .d2 {
      background-color: #ffb5b4;
    }
  </style>
</head>