float

float 속성은 레이아웃을 구성할 때 요소들을 정렬하기 위해서 사용하는 속성이다.
"떠 있다"라는 의미로써 해 당 요소를 다음 요소 위에 떠 있게 하는, 다른 요소들이 float 속성을 지는 태그요소의 존재를 무시하도록 하는 것이다.(공간은 차지)

float 속성을 통해 float 요소 주위로 다른 컨텐츠가 물 흐르듯이 배치가 된다.
float 속성 사용 시에는 position 속성의 absolute 를 사용하면 안된다.
center 속성이 없다. 가운데 정렬 시에는 margin을 이용하여 정렬한다.

속성 값	설명
none	요소를 떠 있게 하지 않는다.(기본값)
left	요소를 왼쪽으로 이동
right	요소를 오른쪽으로 이동

div 태그는 block 요소로 한 줄을 모두 차지하도록 되어 있다.(hello, float)
block 요소인 div 태그에 float: left 속성을 준다면 아래와 같이 hello1은 왼쪽으로 배치되고 float1이 float 속성을 지닌 hello1 존재를 무시하여 같은 줄에 표시된다. (hello1이 inline 요소와 같이 content에 맞게 최소화 되고 float1 위에 붕 떠 있다.)

<html>
    <head>
        <style>
            #hello {
                border: 1px solid red;
            }
            #float {
                border: 1px solid blue;
            }
            #hello1 {
                border: 1px solid red;
                float: left;
            }
            #float1 {
                border: 1px solid blue;
            }
        </style>
    </head>
    <body>
        <h1>float</h1>
        <div id="hello">hello</div>
        <div id="float">float</div>
        <br><br>
        <div id="hello1">hello1</div>
        <div id="float1">float1</div>
    </body>
</html>

이미지와 텍스트가 함께 표시되는 경우, img 태그와 텍스트는 inline 요소이므로 아래와 같이 한 줄에 나란히 배치가 된다.

<html>
    <head>
        <style>
            img {
                width: 400px;
            }
        </style>
    </head>
    <body>
        <img src="mountain.jpg" alt="">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet facilis sit magnam culpa nesciunt amet esse sed explicabo iusto error, recusandae nulla nobis. Assumenda reprehenderit, odit laboriosam veritatis qui aspernatur!
        <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid rem quisquam ducimus maiores explicabo rerum atque consequatur minima, porro quos officia aut assumenda adipisci quod nisi. Quo corporis accusamus dolores.
        </p>
    </body>
</html>

그러나 img 태그에 float 속성을 지정해주면 이미지 옆에 글자를 자연스럽게 전부 표현할 수 있다. float 속성의 이미지가 텍스트 요소에 붕 떠 있게 되는 것이다.

<html>
    <head>
        <style>
            img {
                width: 400px;
                float: left;
            }
        </style>
    </head>
    <body>
        <img src="mountain.jpg" alt="">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet facilis sit magnam culpa nesciunt amet esse sed explicabo iusto error, recusandae nulla nobis. Assumenda reprehenderit, odit laboriosam veritatis qui aspernatur!
        <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid rem quisquam ducimus maiores explicabo rerum atque consequatur minima, porro quos officia aut assumenda adipisci quod nisi. Quo corporis accusamus dolores.
        </p>
    </body>
</html>

clear

clear 속성은 float 속성을 해제하기 위해 사용하는 속성이다. clear 속성이 지정된 영역 이후로는 float가 작동하지 않는다.

속성 값	설명
none	float 작동(기본값)
left	float: left 속성 해제
right	float: right 속성 해제
both	left, right 속성 해제

p 태그에 clear: both 지정을 했을 때, 이미지 옆이 아니라 아래로 표시되었다.(p 태그 block 요소 대로 작동). img 태그의 float: left 속성이 p 태그에 적용되지 않음을 알 수 있다.

<!DOCTYPE html>
<html>
    <head>
        <style>
            img {
                width: 400px;
                float: left;
            }
            p {
                clear: both;
            }
        </style>
    </head>
    <body>
        <img src="mountain.jpg" alt="">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet facilis sit magnam culpa nesciunt amet esse sed explicabo iusto error, recusandae nulla nobis. Assumenda reprehenderit, odit laboriosam veritatis qui aspernatur!
        <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid rem quisquam ducimus maiores explicabo rerum atque consequatur minima, porro quos officia aut assumenda adipisci quod nisi. Quo corporis accusamus dolores.
        </p>
    </body>
</html>

float 문제

float을 이용한 레이아웃 작성 시, float 속성을 가진 자식 요소를 포함하는 부모 요소의 높이가 정상적으로 반영되지 않는 문제가 발생한다. 이는 float 속성의 경우 문서 흐름에서 제외되어(떠 있으므로) 높이를 알 수 없기 때문이다.

<html>
    <head>
        <style>
            .parent::after {
                text-align: center;
                background-color: blanchedalmond;
                padding: 10px;
                content:"";
                clear: both;
                display: block;
            }
            .child1, .child2 {
                width: 50%;
                float: left;
            }
            .child1 {
                background-color: red;
            }
            .child2 {
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="child1">child1</div>
            <div class="child2">child2</div>
        </div>
    </body>
</html>

이러한 문제를 해결하기 위한 4가지 방법이 있다.

overflow: hidden 사용
float 사용
빈 요소에 clear 사용
가상요소 선택자 ::after 사용(권장)

overflow: hidden 사용

.parent {
    overflow: hidden;
    ...
}

부모 요소에 overflow: hidden을 사용하는 것이다. 이 방법은 자식 요소가 부모 요소를 넘칠 때 스크롤이 발생하거나 숨김 현상이 발생할 수 있기 때문에 안전한 방법은 아니다.

float 사용

.parent {
    float: left;
    ...
}

부모 요소에 float 속성을 부여하는 것이다. 이 방법은 모든 요소에 불필요한 float 속성을 부여하도록 하는 것이므로 권장하지 않는다.

빈 요소에 clear 사용

.clear {
    clear: both;
}

<div class="clear"></div>

clear 속성은 float 속성을 해제하는 속성이다. float된 자식 요소의 바로 아래 쪽에 빈 요소 <div class="clear"></div> 를 추가한 후 clear 속성을 추가하면 정상적으로 동작한다. 이 방법은 아무 의미없는 빈 요소를 추가해야 하므로 권장하지 않는다.

가상요소 선택자 ::after(권장)

가상요소 선택자란 실제로 존재하지 않는 요소를 마치 존재하는 것처럼 이용하는 기법이다.(first-line, first-letter, before, after) ::after 가상요소 선택자는 content 속성을 이용하여 요소가 끝나는 시점에 content 값을 출력해 준다. 이를 이용하여 clear: both 속성을 부여하면 자식의 높이를 부모에게 전달할 수 있고 이는 가장 이상적으며 권장하는 방법이다.

<html>
    <head>
        <style>
            .parent {
                text-align: center;
                background-color: blanchedalmond;
                padding: 10px;
            }
            .clearfix::after {
                content: "";
                clear: both;
                display: block;
            }
            .child1, .child2 {
                width: 50%;
                float: left;
            }
            .child1 {
                background-color: red;
            }
            .child2 {
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="parent clearfix">
            <div class="child1">child1</div>
            <div class="child2">child2</div>
        </div>
    </body>
</html>

저작자표시

'CSS' 카테고리의 다른 글

[CSS] Transition (43)	2022.03.12
[CSS] Gradient (66)	2022.03.11
[CSS] Position (18)	2022.03.08
[CSS] z-index / overflow (4)	2022.03.07
[CSS] 타이포그래피 (1)	2022.03.06

[CSS] Float