float

float

float은 '뜨다'라는 의미로, 웹페이지에서 이미지를 띄워서 어떻게 배치를 할 것인가에 대한 속성입니다.

li {
    float:left;
}

• inherit : 부모 요소에서 상속
• left : 왼쪽 배치, 지정시 display 무시
• right : 오른쪽 배치, 지정시 display 무시
• none : 요소를 부유시키지 않음

float 사용할 때 주의점

clear : float 속성을 통해 태그를 부유시킨 이후 문서의 흐름을 제거하기 위해 쓰입니다.

<ul class="clearfix"></ul> // float 속성을 적용시킨 부모요소에 clearfix 클래스명 부여

.clearfix::after {
    content: "";
    clear: both;
    display: block;
}