1103_css_float

 

<float>

 

웹 페이지의 레이아웃(layout)을 작성할 때 자주 사용

 *공식: 자식이 float left하면 반드시 부모도 float left여야 한다

 

• inherit - 부모요소 상속
• left - 왼쪽 
• right - 오른쪽
• none - 요소 부유시키지 않음

 

-사용 예시)

 section{
            float: left;
            width: 580px;

        }

        section article{
            float: left;
            width: 250px;
            height: 220px;
            margin: 5px;
            padding: 10px;
            border: 1px solid #ccc;
        }

        aside{
            float: right;
            width: 200px;
            border: 1px solid darkgreen;
            margin-top: 77px;
        }

 

 

<clear>

 

 float 속성이 적용된 이후 나타나는 요소들의 동작을 조절, 이후에 등장하는 요소들이 더는 flaot 속성에 영향을 받지 않도록 설정

clear : both;

 

       footer{
            clear: both; /*앞 aside의 float에 딸려 올라가지 않도록*/
            width: 800px;
            margin-bottom: 0;
            background-color: #000;
            color: white;
            text-align: center;
        }