[CSS]03-08.clear(float 정렬 줄 넘김)

galil 2018. 10. 17. 13:31

float을 통해 요소를 나열했는데 한쪽으로만 쭉 나열되면 곤란하다.

중간에 끊어줘서 나열해줘야 하는데

그럴 땐 clear 키워드를 사용한다.

사용할 요소를 지정하여 clear: left; 사용하면 다음줄로 넘어간다.

left말고 다른 속성도 직접 써보고 참조해보자

<html>
    <head>
        <meta charset="UTF-8">
        <title>Float Clear</title>
        <link rel="icon" href="img/btn.png">
        <style>
            div{
                width: 50px;
                height: 25px;
                border: 3px solid yellowgreen;
                margin: 5px;
                float: left;
            }
            /*clear로 다음줄로 밀기*/
            div.first{
                /*클래스는 중복을 피하기 위해*/
                /*왠만하면 [요소].[클래스 이름] 이와 같이 사용하자.*/
                border: 3px solid red;
                clear: left;
            }
        </style>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>

        <div class="first"></div>
        <div></div>
        <div></div>

        <div class="first"></div>
        <div></div>
        <div></div>
    </body>
</html>

4번째와 7번째에 first라는 이름을 부여하고 clear를 사용하였다.

저작자표시 비영리 변경금지 (새창열림)