🎨 float 속성 사용법 한방 정리

...

CSS Float

float 프로퍼티는 해당 요소를 다음 요소 위에 떠 있게 한다. 여기서 떠 있다(float)는 의미는 요소가 기본 레이아웃 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽에 이동하는 것이다. 그래서 보통 레이아웃을 구성할 때 요소를 가로 정렬하기 위해 사용되는 기법이다. 예를 들어, 문서에 사진과 그림이 있을 때, 그림을 왼쪽이나 오른쪽으로 띄워서 정렬 하거나 각 객체를 오른쪽이나 왼쪽으로 정렬하여 전체 문서를 배치(layout)할 때도 사용할 수 있다

float 속성

프로퍼티값	Description
none	요소를 떠 있게 하지 않는다. (기본값)
right	요소를 오른쪽으로 이동시킨다
left	요소를 왼쪽으로 이동시킨다.

사용법은 간단하다. 부유하게 하고 싶은 요소에 ~~float: left~~ 프로퍼티를 사용하면 왼쪽부터 가로 정렬되고, ~~float: right~~ 프로퍼티를 사용하면 오른쪽부터 가로 정렬된다.

img {
    float: left;
}

float 취소

clear 속성

CSS의 clear 속성은 별도의 속성으로서, 주요 기능은 float 속성이 적용된 요소 다음에 위치하는 요소들이 float 속성이 적용된 요소와 겹치는 현상을 방지하기 위해 사용된다. 요소에 float 속성이 적용되면 그 이후에 등장하는 모든 요소들은 정확한 위치를 설정하기가 매우 힘들어 지게 되는데, 따라서 clear 속성을 사용하여, 이후의 요소들이 더는 float 속성에 영향을 받지 않도록 설정해주어 요소들이 float 속성이 적용된 요소 아래에 위치하도록 한다.

clear 속성에도 float 속성과 같이 left, right, both, none 값이 있다.

프로퍼티값	Description
none	clear를 설정하지 않은 기본값. 요소가 어느 쪽으로든 부유할 수 있다.
right	float: right 를 취소시킴 요소가 왼쪽에 부유한 요소 다음에 위치하도록 한다.
left	float :left 를 취소시킴 요소가 오른쪽에 부유한 요소 다음에 위치하도록 한다.
both	float:left , float:right 둘다 취소시킴 요소가 왼쪽과 오른쪽에 부유한 요소 다음에 위치하도록 한다.

예를들어 아래 예제와 같이 이미지에 ~~float: right~~ 속성을 주게되면 이미지는 오른쪽에 배치되고 그 다음 문단 요소는 자동으로 왼쪽에 배치되게 된다.

<div>
  <img src="https://taegon.kim/wp-content/uploads/2018/05/image-5.png">
</div>
<p>
  Lorem Ipsum is simply dummy text of ...
</p>

img {
  float: right;
  width: 25%;
}

만일 문단 영역을 이미지 아래에 위치하도록 하고 싶다면 ~~float: right~~ 를 취소시키는 ~~clear: left~~ 를 지정 해주면 된다.

img {
  float: right;
  width: 25%;
}

p {
  clear: right; // p 태그는 float속성에 영향을 받지 않음
}

float 사용시 주의사항

float 프로퍼티를 사용할 때 요소의 위치를 고정시키는 position 프로퍼티의 absolute를 사용하면 안된다. float 속성이 relative한 위치 지정을 하기 때문에 ~~position: absolute~~ 속성이 적용되지 않기 때문이다.

또한 float 속성을 사용하면 해당 요소는 일반적인 흐름에서 벗어나게 되어 요소의 부모 요소는 해당 요소의 높이를 인식하지 못하게 되는데, 이 경우 부모 요소에 ~~overflow: hidden~~ 속성을 추가하여 해결할 수 있다.

float 속성을 이용한 레이아웃

float 속성을 이용하면 요소들을 좌우로 부유시켜서 배치할 수 있기 때문에 예전에는 float 속성을 이용하여 레이아웃을 구성하는 것이 일반적 이었다. 하지만 float 속성은 요소들이 부유하면서 다른 요소들과 겹치기도 하고, 높이를 자동으로 계산하지 못하는 등의 문제점이 있어서, 현재는 flexbox나 CSS Grid와 같은 레이아웃 기술을 이용하여 더욱 효율적이고 다양한 레이아웃을 구성하고 있어 참고 정도로만 보자

<h1>float 속성을 이용한 레이아웃</h1>
<div class="page">

    <header>
        <h2>header 영역</h2>
    </header>
    <nav>
        <h2>nav 영역</h2>
        <p>여기에는 보통 메뉴가 들어갑니다.</p>
    </nav>
    <section>
        <h2>section 영역</h2>
        <p>여기에는 페이지에 해당하는 내용이 들어갑니다.<br>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare sapien suscipit tincidunt ullamcorper. Cras ac sem sed mauris maximus rhoncus vel in metus. Nam pharetra arcu sit amet dolor interdum, eget scelerisque libero finibus. Phasellus quis vulputate ante. Fusce sit amet viverra justo. Donec id elementum mauris. Nam id porttitor nisl, et suscipit nunc. Vestibulum sit amet volutpat quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis placerat sem eu facilisis ultricies.
        </p>
    </section>
    <footer>
        <h2>footer 영역</h2>
    </footer>
</div>

div.page {
    border: 3px solid #CD5C5C;
    overflow: auto;
}

h2 { text-align: center; }

header { border: 3px solid #FFD700; }

nav {
    border: 3px solid #FF1493;
    width: 150px;
    float: left; // 네비게이션은 왼쪽 위치
}

section {
    border: 3px solid #00BFFF;
    margin-left: 156px;
}

footer{ border: 3px solid #00FA9A; }

See the Pen float layout by barzz12 (@inpaSkyrim) on CodePen.

# 참고자료

https://tcpschool.com/css/css_position_float

https://css-tricks.com/all-about-floats/

https://poiemaweb.com/css3-float