CSS3 - CSS float 속성

액트 2019. 7. 12.

float

요소의 위치를 설정하기 위한 속성

사용법

float: left | right

left: 왼쪽 정렬
right: 오른쪽 정렬

※ float 속성을 적용하기 위해선 감싸고 있는 상위 태그에

overflow:hidden; 속성을 적용해야 한다

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>

    <style>
        #row1 {
            width:500px; margin:0 auto;
            border:5px solid #dddddd;
            overflow:hidden;
        }

        #row1 #first {
            width:100px; height:100px;
            float:left;
            margin:5px;
            padding:5px;
            border:1px solid #cccccc;
        }

        #row1 #second {
            width:100px; height:100px;
            float:left;
            margin:5px;
            padding:5px;
            border:1px solid #cccccc;
        }

        #row2 {
            width:500px; margin:0 auto;
            border:5px solid #dddddd;
            overflow:hidden;
        }

        #row2 #first {
            width:100px; height:100px;
            float:right;
            margin:5px;
            padding:5px;
            border:1px solid #cccccc;
        }

        #row2 #second {
            width:100px; height:100px;
            float:right;
            margin:5px;
            padding:5px;
            border:1px solid #cccccc;
        }

    </style>

</head>
<body>
    <div id="row1">
        <div id="first">first</div>
        <div id="second">second</div>
    </div>

    <div id="row2">
        <div id="first">first</div>
        <div id="second">second</div>
    </div>
</body>
</html>

<div> 태그는 block 형식의 태그이지만

float:left; 속성을 적용하면서 왼쪽 또는 오른쪽 정렬되었다.

만약, 감싸고 있는 상위 태그에 overflow:hidden; 속성을 적용 안하게 된다면 아래와 같다

위와 같이 다른 모양이 된다.

'IT > Web' 카테고리의 다른 글

CSS3 - CSS 드롭다운 가로 메뉴 만들기 (0)	2019.07.16
HTML5 - 웹페이지 구조 만들기 (0)	2019.07.12
CSS3 - CSS position 속성 static, fixed, absolute, relative 정리 (0)	2019.07.11
CSS3 - CSS 글자 관련 속성 font, text (0)	2019.07.11
CSS3 - CSS box-sizing, border, background-image 속성 (0)	2019.07.11