[TIL] CSS 속성 - float, clear

float

요소를 보통의 흐름에서 벗어나게 할 때, 레이아웃을 만들 때 영역을 좌우로 분할할 때 사용하는 용도로 선언한다.

<div class="container">
    <div style="float:left">Box1</div>
    <div style="border: 2px solid red">Box2</div>
</div>

.container{
    width:400px;
    padding:15px;
    border:1px dashed #aaa;
}
.container div{
    width:100px;
    height:100px;
}
.container div:nth-child(1){
    background-color:green;
}
.container div:nth-child(2){
    background-color:skyblue;
}

float 속성을 가진 요소가 위로 붕 뜬 느낌으로 생각하면 된다.
Box1은 위로 떠서 왼쪽으로 가있고, Box2는 뒤로 밀려나 있다.

주변 텍스트나 인라인 요소가 주위를 감싸는 특징이 있다.

<div class="container">
    <div style="float:left;">Box1</div>
    <div style="float:right;">Box2</div>
    <p> 
        CSS 속성(property) float은 한 요소가 보통 흐름으로부터 빠져 텍스트 및 인라인 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다. 부동 요소는 float의 계산값이 none이 아닌 요소 입니다.</p>
</div>

p요소는 블록 요소이지만 안에 텍스트들은 인라인 요소이다. p안의 인라인 요소들은 float된 box1과 box2요소들을 제외한 나머지 영역에 들어가게 된다.
p에 border를 주게 되면 box1과 box2 아래에 p영역의 배경 영역이 있는것을 알 수 있다.
p영역이 float된 요소들의 공간을 차지한채로 위로 당겨졌지만, 인라인 요소인 텍스트들은 float된 요소들의 자리를 비워두고 공간을 차지한다고 볼 수 있다.

대부분 요소의 display값을 block으로 변경한다.

clear

floating된 요소의 영향에서 벗어나 다음 행으로 이동할 때 선언하는 속성이다.

clear:none;/*기본값*/
clear:left; /*왼쪽 요소 float의 영향에서 벗어남*/

<div style="float:left">float:left</div>
<span style="display:block;clear:left;">내용</span>

float이 없는 것 처럼 아래로 개행된다.

• clear:right;

• clear:both; /양쪽 다 벗어남/
  block-level 요소만 적용 가능해서 해당 태그가 block 태그이거나 display가 block-level일때 사용 가능하다.

float이 있는 경우 같은 부모 내에서 clear:both를 선언해주면, 다른 부모요소의 자식들에는 float이 영향을 주지 않는다.