연습장

9. float 요소 정렬 본문

CSS3

9. float 요소 정렬

js0616 2024. 6. 28. 22:04

https://poiemaweb.com/css3-float

 

CSS3 Float | PoiemaWeb

float 프로퍼티는 주로 레이아웃을 구성할 때 블록 레벨 요소를 가로 정렬하기 위해 사용되는 중요한 기법이다. flexbox 레이아웃를 사용한다면 더욱 간단하게 정렬을 구현할 수도 있지만 flexbox 레

poiemaweb.com

 

 

 

float 프로퍼티는 주로 레이아웃을 구성할 때 블록 레벨 요소를 가로 정렬하기 위해 사용되는 중요한 기법이다. 

float 프로퍼티는 본래 아래 예제와 같이 이미지와 텍스트가 있을 때, 이미지 주위를 텍스트로 감싸기 위해 만들어진 것이다.

 

  <style>
    img {
      float: left;
      margin-right: 10px;
    }
  </style>

 

 

float 프로퍼티는 해당 요소를 다음 요소 위에 떠 있게(부유하게) 한다.

여기서 떠 있다(float)는 의미는 요소가 기본 레이아웃 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽에 이동하는 것이다.

float 프로퍼티를 사용할 때 요소의 위치를 고정시키는 position 프로퍼티의 absolute를 사용하면 안된다.

1. 정렬
float 프로퍼티를 사용하지 않은 블록 요소들은 수직으로 정렬된다. 

 

float:left; 왼쪽부터 가로 정렬 

float:right; 오른쪽부터 가로 정렬

margin : 0 auto; 중앙 가로 정렬 


오른쪽 가로 정렬의 경우, 먼저 기술된 요소가 가장 오른쪽에 출력되므로 출력 순서가 역순이 된다.

 

float 프로퍼티는 좌측, 우측 가로 정렬만 할 수 있다.

 

 

<!DOCTYPE html>
<html>
<head>
  <style>

    .box {
      color: white;
      font-weight: bold;
      font-size: 50px;
      border-radius: 6px;
      width: 100px;
      height: 100px;
      margin: 10px;
      padding: 10px;
    }
    .d1, .d2 {
      float: left;
    }
    .d1 {
      background: red;
    }
    .d2 {
      background: orange;
    }
    .d3, .d4 {
      float: right;
    }
    .d3 {
      background: red;
    }
    .d4 {
      background: orange;
    }
    .d5 {
      background: green;
      float: none;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box d1"> 1 </div>
    <div class="box d2"> 2 </div>
    <div class="box d3"> 3 </div>
    <div class="box d4"> 4 </div>
    <div class="box d5"> 5 </div>
  </div>
</body>
</html>

 

 

2. width
width 프로퍼티의 기본값은 100%이므로 width 프로퍼티값을 지정하지 않은 block 요소는 부모 요소의 가로폭을 가득 채운다.

 

width 프로퍼티를 선언하지 않은 block 레벨 요소에 float 프로퍼티가 선언되면 width가 inline 요소와 같이 content에 맞게 최소화되고 다음 요소 위에 떠 있게(부유하게) 된다.

 

 

위 예제를 살펴보면 d1 클래스 요소에는 float: left;를 선언하였고 d2 클래스 요소에는 float를 선언하지 않았다. 

 

이때 d1 클래스 요소는 width가 inline 요소와 같이 content에 맞게 최소화되고 다음 요소인 d2 클래스 요소 위에 떠 있게(부유하게) 된다.

d2 클래스 요소는 본래의 width(100%)를 유지한 상태에서 d1 클래스 요소가 그 위에 위치한다.

 

 

이렇게 보면 더 이해가 잘가는데 뒤쪽에 d2 클래스 요소가 있고 그 위에 z 인덱스처럼 위에 위치하게 됨 

 

 

 

3. float 프로퍼티 관련 문제 해결 방법

 

3.1 float 프로퍼티가 선언된 요소와 float 프로퍼티가 선언되지 않은 요소간 margin이 사라지는 문제

-> float 프로퍼티를 선언하지 않은 요소(.d2)에 overflow: hidden 프로퍼티를 선언하는 것이다.

 

두 요소 사이에 margin이 표현됨

 

 

3.2 float 프로퍼티가 선언된 자식 요소를 포함하는 부모 요소의 높이가 정상적으로 반영되지 않는 문제

 

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      color: white;
      text-align: center;
      padding: 10px;
      background-color: #def0c2;
    }
    .d1, .d2 {
      float: left;
      width: 50%;
      padding: 20px 0;
    }
    .d1 {
      background-color: #59b1f6;
    }
    .d2 {
      background-color: #ffb5b4;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="d1">1</div>
    <div class="d2">2</div>
  </div>
  <div style="background:red;padding:10px;color:white;">3</div>
</body>
</html>

 

연두색 부모요소에 하늘색, 분홍색 요소가 들어가지 않는 상황.

 

 

1번 해결책

.container {
    color: white;
    text-align: center;
    padding: 10px;
    background-color: #def0c2;
    overflow: hidden;
  }

 

 

-> float 프로퍼티가 선언된 자식 요소의 부모 요소(.container)에 overflow: hidden 프로퍼티를 선언하는 것이다.

 

 

2번 해결책

 

-> container 영역이 끝나기 직전 빈 요소를 만들고 clear:both를 설정하는 방법도 가능하다.

하지만 의미 없는 빈 요소를 사용하여야 하기 때문에 이 방법 역시 권장할 수 있는 방법은 아니다.

 

    .clear {
      height: 0;
      clear: both;
    }
 
  <div class="container">
    <div class="d1">1</div>
    <div class="d2">2</div>
    <div class="clear"></div>
  </div>
 

 

 

3번 해결책

 

-> ::after 가상 요소 선택자를 이용하는 것이다. 

부모 요소에 위 예제와 같이 사전에 작성한 clearfix 클래스만 추가하거나,

해당 요소를 선택하여 클리어 문법을 선언하면 되기 때문에 가장 깔끔하고 간편하다.

    .clearfix:after {
      content: "";
      display: block;
      clear: both;
    }
 
  <div class="container clearfix">

 

 

 

4번해결책

 

-> float 프로퍼티 대신 display: inline-block;을 선언하는 것이다.

 

    .d1, .d2 {
      display: inline-block;
      width: 50%;
      padding: 20px 0;
    }

 

주의해야야 점은 inline-block 프로퍼티 요소를 연속 사용하는 경우, 두 요소 사이에 정의하지 않은 공백(4px)가 자동 지정되는 것이다.

 

width 가 50% 씩인데 4px 이 추가되어 2번 블록이 아래로 이동된 모습

 

이 현상을 회피하기 위해 부모 요소에 font-size: 0;을 선언하여 두 요소 사이에 정의하지 않은 공백을 제거한다.

    .container {
      color: white;
      text-align: center;
      padding: 10px;
      background-color: #def0c2;
      font-size: 0;
    }

 

 

다 비슷비슷해보이는데... 그렇다고한다.

 

역시 화면구성에는 float 보단... flex 가 편한거같다

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

'CSS3' 카테고리의 다른 글

11. Vendor Prefix 벤더 프리픽스  (0) 2024.06.29
10. Inheritance & Cascading 스타일의 상속과 적용 우선 순위  (0) 2024.06.28
8. position 요소의 위치 정의  (0) 2024.06.28
7. 폰트와 텍스트  (0) 2024.06.28
6. 백그라운드  (1) 2024.06.28
'CSS3' Related Articles more