계발하는 개발자

[CSS] Float 그리고 Clear 본문

📌 Language/CSS

[CSS] Float 그리고 Clear

dev_genie 2022. 12. 27. 00:59

1. float 속성 이해하기

float은 요소를 왼쪽 or 오른쪽 방향으로 띄워서 정렬시키는 속성으로

float요소는 block요소를 inline-block요소로 바꿔주는 것을 뜻한다.

 

요소에 float을 줄 경우 해당 요소는 최소 크기로 변경되며 띄워지고

크기가 줄면서 생긴 빈공간을 그 뒤에 있는 요소가 올라오며 채우게 된다.

 

다음의 예를 보면 이해가 쉬울거다 !

예제에서는 이미지 대신 div박스로 표현했다 (_ _ )

초록색 div요소를 float:left 하고 margin: 10px을 준 모습.

보면 텍스트 박스가 div요소를 피해서 위치된다는 것을 알 수 있다.

 

만약, div요소를 피해가지 않았으면 하는 요소가 특별히 있는 경우라면

해당 요소에 clear 속성을 적용하면 된다. 

 

[ clear 속성에 올 수 있는 값 ]

- clear: left - 왼쪽으로 플롯팅된 속성을 제거

- clear: right - 오른쪽으로 플롯팅된 속성을 제거

- clear: both  - 양쪽 모두에 플롯팅된 속성을 제거 (만능!)

 

여기서는 div요소가 왼쪽을 기준으로 플롯팅 되었으므로

플롯팅 영향을 없애기 위해 2번째 p문단에 clear: left를 적용해줬다

(div가 왼쪽에 떠있으므로 p태그에 clear:right를 할 경우 안 먹힌다)

<style>
    div {
        width: 200px;
        height: 100px;
        margin: 10px;
        background-color: green;
        float: left;
    }

    p {
        border: 1px solid gray
    }
</style>
</head>
<body>
    <div>box</div>
    <p>There is joy
        in all:
        in the hair I brush each morning,
        in the Cannon towel, newly washed,
        that I rub my body with each morning,
        in the chapel of eggs I cook
        each morning,
        in the outcry from the kettle
        that heats my coffee
        each morning,
        in the spoon and the chair
        that cry “hello there, Anne”
        each morning,
        in the godhead of the table
        that I set my silver, plate, cup upon
        each morning.
    </p>
    <p style="clear: left;">All this is God,
        right here in my pea-green house
        each morning
        and I mean,
        though often forget,
        to give thanks,
        to faint down by the kitchen table
        in a prayer of rejoicing
        as the holy birds at the kitchen window
        peck into their marriage of seeds.
        So while I think of it,
        let me paint a thank-you on my palm
        for this God, this laughter of the morning,
        lest it go unspoken.
        The Joy that isn’t shared, I’ve heard,
        dies young.</p>
</body>

2번째 p태그에 clear 속성을 적용하자마자 div요소를 피해가지 않고 뚝 떨어진다.

 

2. float시 부모요소 벗어나지 않는 방법

만약 하나의 div 부모요소로 자식요소들을 감싸줘야 하는데

자식요소들이 모두 float 상태라면 부모는 자식을 인식하지 못하고 height 값을 찾지 못한다.

 

이런 경우 아래 그림처럼 자식요소는 부모요소를 벗어난 모습이 되게 되는데

이 경우 사용할 수 있는 방법들을 한 번 알아보도록 하자.

자식요소가 부모요소를 벗어난 모습

방법1) 부모요소에 float 주기

부모요소에 float:left 적용

<style>
    .parents {
        margin: 20px;
        padding: 20px;
        width: 800px;
        border: 5px solid black;
        float: left;
    }

부모요소에 float:left를 줬더니 자식요소가 부모요소 안에 담기도록 높이가 조절되었다.

그러나 위 방식은 부모요소를 왼쪽/오른쪽 정렬할 때는 요긴하나 중앙정렬이 안되는 단점이 있다.

 

방법2) 부모요소에 overflow:hidden 주기

부모요소에 overflow:hidden 적용

<style>
    .parents {
        margin: 20px;
        padding: 20px;
        width: 800px;
        border: 5px solid black;
        overflow: hidden;
    }

부모요소에 overflow:hidden값을 주면 위 방법1과 마찬가지로 자동으로 높이조절이 된다.

그러나 위 방식은 부모요소에 자식요소보다 작은 높이값이 들어가면 자식요소가 잘리는 단점이 있다.

 

방법3) 가상요소 ::after 사용하기

부모요소에 가상요소 ::after 적용

<style>
    .parents {
        margin: 20px;
        padding: 20px;
        width: 800px;
        border: 5px solid black;
    }

    .parents::after {
        content: '';
        display: block;
        clear: both;
    }

부모요소에 ::after를 사용하여 가상요소를 만들어준다.

부모요소 뒤에 보이지 않는 가상요소를 만들어 뒤 요소가 위로 따라올라가지 않게 해주는 것으로

위 방식들 중에서 가장 많이 사용되는 방법이다.

 

해당 코드블럭의 의미를 알아보면

부모요소 뒤에 내용이 빈(content: ' ') 블록(display: block)을 만들고

float:left된 자식요소를 초기화(clear: both)하겠다는 뜻이다.

 

3. 마무리

해당 주제에 대해 공부한 내용을 2차 정리한 것이기 때문에

잘못된 부분이나 피드백 있으시다면 댓글에 남겨주시면 감사하겠습니다 !

*이해에 도움되었던 강의 & 자료 출처https://youtu.be/qSGXLWKOXHM

https://blog.naver.com/PostView.naver?blogId=iwkdh&logNo=221411259502

 

https://ddorang-d.tistory.com/12

LIST

'📌 Language > CSS' 카테고리의 다른 글

[CSS] overflow 속성 - 넘치는 컨텐트 요소 제어하기  (0) 2022.12.27
[CSS] White-space / 요소의 공백 처리 방법을 정하는 속성  (0) 2022.12.27
[CSS] Outline vs Border 차이  (0) 2022.12.27
[CSS] 박스 크기를 결정하는 box-sizing : border-box, content-box  (0) 2022.12.20
[CSS] 요소를 효과적으로 정렬하는 Flex-box: Justify-Content 속성  (0) 2022.12.04
profile

dev_genie

@dev_genie

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!