CSS Float 뽀개기

float?

The CSS clear property specifies what elements can float beside the cleared element and on which side.
-3wSchool-

CSS 에서 Float 속성은 어떤 element 를 "띄우기" 위해 사용한다.
position: absolute; 와 비슷하게 보이지만 이 둘의 띄우기는 전여 다르다.

<div class="container">
      <img src="./어쩌라는건데.jpg" alt="" />
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur
        temporibus ipsum perspiciatis consectetur eos, id facilis quod. Magnam,
        hic voluptatibus accusantium necessitatibus commodi recusandae quia sunt
        fuga perferendis, consequuntur ipsam aliquam qui error culpa et, labore
        placeat at? Quas vel necessitatibus molestiae quos quasi est ratione
        expedita assumenda rem beatae magni sint, vero ea provident,
        voluptatibus consectetur consequatur voluptates. Ipsam dolores dicta
        eos, doloribus eius optio exercitationem mollitia laudantium, ex
        asperiores totam veritatis laborum possimus accusamus consequuntur! Iure
        sunt est porro natus non rerum repellat commodi quam, nobis harum id
        repudiandae incidunt ad deleniti obcaecati? Non velit sunt dolorem.
        Aliquam!
      </p>
    </div>

위의 코드를 살펴보면, P 태그 안에 img 태그가 들어가있고, 이미지의 가장 밑 부분부터 글씨가 시작되고 있다.
absolute와 float의 차이를 알아보기 위해 img 태그에 각각 absolute, float를 적용시켜보자.

absolute의 경우

.container {position: relative;}
img {position: absolute;}

position absolute를 사용할 경우, img태그의 넓이와 높이를 부모 요소가 인식하지 못 해, p태그가 이미지 밑에 깔리게 되는 것을 확인할 수 있다. padding, margin 등을 이용해 글자를 옆으로 밀어내는 방법도 있긴 하지만, 이보다 더 간단한 방법이 존재한다.

float의 경우

img {float: left;}

다음과 같이 float을 사용하게되면 글씨가 img영역 옆으로 비켜간다.
가장 대표적인 차이점이 바로 이 점이다.
float를 시켜도 다른 영역들은 float 된 요소의 영역을 인식한다.

하지만 float를 사용할 경우, 위처럼 float된 요소가 부모의 영역을 벗어나는 경우들이 생긴다.

float로 부모의 영역을 벗어나는 요소를 정리하는 방법

1. 컨테이너 내부 영역 안에 clear: both;를 적용 시킬 tag 작성하기.

<div class="container">
    <img src="./어쩌라는건데.jpg" alt="" />
    <p>
        ...
    </p>
    <div style="clear: both"></div>
</div>

=> HTML 코드를 더 작성해야하는 단점이 있다.

2. overflow: hidden 사용하기

*css
.container { overflow: hidden;}

오잉 overflow: hidden; 은 영역을 벗어나는 걸 숨기기 위한 태그 아니야!? 라고 할 수 있지만, float의 경우에서 사용하면 float된 요소의 영역까지 부모 태그가 감싸안게 됩니다.

3. 바깥 요소 float 시키기

*css
.container {float: left}

이렇게 할 경우 float된 img 높이를 인지하여 그만큼 높이를 차지하게 됩니다.
하지만 , float이 되어버려 block 요소의 성질이 없어지게되므로, width를 추가하는 등의 조치를 취해주어야 합니다.

3가지 결과 모두 다음과 같은 형태로 나타나게 됩니다.