Float 속성

https://velog.io/@shin6403/CSS-float%EB%9E%80

CSS float란?

 

CSS float 속성정리

float속성은 이미지 주변에 텍스트를 감싸는 용도로 개발되었지만, 현재는 레이아웃 구성에 자주 쓰인다.

1. float 속성

float 속성은 요소를 왼쪽 또는 오른쪽으로 "띄워" 배치한다.

• none: 기본값, 요소를 띄우지 않는다.
• left: 요소를 왼쪽으로 띄운다.
• right: 요소를 오른쪽으로 띄운다.
• inherit: 부모 요소의 float 속성을 상속받는다.

2. float 속성 사용 예시

이미지와 텍스트 함께 배치하기

HTML

 

<img src="eagle.jpg" style="float: left; width: 200px; height: 200px;">
<div>
  독수리 사진입니다. 몽골에서 직접 촬영했으며...
</div>

위 코드는 이미지를 왼쪽에 띄우고 텍스트를 이미지 오른쪽에 배치한다. float: right를 사용하면 이미지를 오른쪽에, 텍스트를 왼쪽에 배치할 수 있다.

3. clear 속성

float 속성을 더 이상 사용하고 싶지 않을때 clear속성을 사용한다.

clear 속성이 지정된 영역 이후에는 더이상 float가 작동하지 않는다.

• none: 기본값, 아무런 해제도 하지 않는다.
• left: float: left를 해제.
• right: float: right를 해제.
• both: 모든 float (left, right)를 해제.
• inherit: 부모 요소의 clear 속성을 상속받는다.

4. clearfix

float 속성을 사용하면 부모 요소가 자식 요소의 높이를 인식하지 못하는 문제가 발생할 수 있다. 이를 해결하는 방법이 clearfix 다.

clearfix 핵 사용법

부모 요소에 다음 CSS 코드를 추가한다.

CSS

 

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

clearfix 적용 예시

HTML

 

<div class="clearfix">
  <img src="eagle.jpg" style="float: left; width: 200px; height: 200px;">
  <div>
    이미지가 부모 요소 영역을 침범하는 문제를 해결합니다.
  </div>
</div>

 

float 기반 레이아웃 예시

HTML

 

<div class="main-page">
  <header class="header">
    <h1>배너</h1>
  </header>
  <aside class="sidebar">
    <h2>사이드바</h2>
  </aside>
  <section class="content">
    <h2>본문 내용</h2>
  </section>
</div>

위 코드를 float 속성을 사용하여 레이아웃을 구성할 수 있다.

float 기반 레이아웃의 한계

• 복잡한 레이아웃 구성에 어려움
• 반응형 디자인에 취약