나의 개발일지

float과 clear에 대하여~ 본문

CSS

float과 clear에 대하여~

heew0n 2023. 10. 10. 19:39
float
요소의 문서의 일반적인 흐름에서 제외되어 자신을 포함하고 있는
컨테이너의 왼쪽이나 오른쪽에 배치된다
(문서의 흐름에선 제외, 필요한 만큼의 공간은 차지)

 

속성값 의미
none 기본값, 원래 상태
Left 자신을 포함하고 있는 박스의 왼편에 떠 있어야 함
right 자신을 포함하고 있는 박스의 오른편에 떠 있어야 함

 

코드세팅

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #a{ width: 100px; height: 80px;
            background-color: aqua;
        }
        #b{width: 100px; height: 50px;
            background-color: pink;
            }

    </style>
</head>
<body>
    <div id="a"></div>
    <div id="b"></div>
    <p>starbucks</p>
</body>
</html>

float: right;

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #a{ width: 100px; height: 80px;
            background-color: aqua;
            float: right;
        }
        #b{width: 100px; height: 50px;
            background-color: pink;
            }

    </style>
</head>
<body>
    <div id="a"></div>
    <div id="b"></div>
    <p>starbucks</p>
</body>
</html>

일반적인 문서의 흐름이라면 핑크 - 아쿠아 - 스타벅스 이지만

float: right; 을 써서 일반적인 문서 흐름을 무시하고

아쿠아가 오른 쪽으로 이동되어졌다

 

 

float: left;

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #a{ width: 100px; height: 80px;
            background-color: aqua;
            float: right;
        }
        #b{width: 100px; height: 50px;
            background-color: pink;
            float: left;
            }

    </style>
</head>
<body>
    <div id="a"></div>
    <div id="b"></div>
    <p>starbucks</p>
</body>
</html>

float: left; 를 썼더니 스타벅스를 무시하고

왼쪽으로 이동되어졌다.

 

브라우저가 좁아져도 박스들은 왼쪽 오른쪽에 계속 자리 잡게 된다

 

 

clear
float 속성 요소 이후에 표시되는 요소가 float을 해제하여 
아래로 내려가게 할 수 있다
속성값 의미
none 기본값, 이래로 이동되지 않음을 나타내는 키워드
left float이 left인 요소 아래로 내려감을 의미
right float이 right인 요소 아래로 내려감을 의미
both float이 left 및 right인 요소 아래로 내려감을 의미

 

 

clear: right;

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #a{ width: 100px; height: 80px;
            background-color: aqua;
            float: right;
        }
        #b{width: 100px; height: 50px;
            background-color: pink;
            float: left;
            }
        p{
            clear: right;
        }
    </style>
</head>
<body>
    <div id="a"></div>
    <div id="b"></div>
    <p>starbucks</p>
    <p>starbucks</p>
    <p>starbucks</p>
    <p>starbucks</p>
    <p>starbucks</p>
    <p>starbucks</p>
    <p>starbucks</p>
</body>
</html>

float이 right 요소인 박스 아래로 내려갔다

( **right에 위치한 박스 height 가 80ox)

 

clear: both;  **동시 해결

left 요소와 right 요소 밑으로 내려간다

 

 

 

 

저작자표시

'CSS' 카테고리의 다른 글

의사요소/after/before/first-line/marker/placeholder  (0) 2023.10.11
특성 선택자와 결합선택자에 대하여~  (0) 2023.10.10
background에 대하여~  (1) 2023.10.10
폰트어썸에서 아이콘 만들기&링크생성하기  (1) 2023.10.07
display flex에 대하여~  (1) 2023.10.07
'CSS' Related Articles more