CSS Layout - float and clear

float 속성은 요소가 어떻게 떠있는지 지정한다.

clear 속성은 지워진 요소 옆에 어떤 요소가 떠오르며 어떤 면에 떠있을 수 있는지 지정한다. (뭔말인지..)

float 속성

float 속성은 웹 페이지의 레이아웃과 위치 지정을 위해 쓰인다.

float 속성은 다음 값을 가질 수 있다

left : 요소는 컨테이너의 왼쪽에 떠있다

right : 요소는 컨테이너의 오른쪽에 떠있다.

none : 요소가 떠있지 않다. 기본값

inherit : 요소는 부모의 float 값을 상속한다.

가장 간단한 사용에 있어서 float 속성은 이미지 주변 텍스트를 감싸는 데 쓰일 수 있다.

float : right

https://www.w3schools.com/css/tryit.asp?filename=trycss_layout_float

float : left

https://www.w3schools.com/css/tryit.asp?filename=trycss_layout_float2

no float

https://www.w3schools.com/css/tryit.asp?filename=trycss_layout_float_none

clear 속성

다음과 같은 값을 가진다

none : 양쪽에 요소가 떠다니는 것을 허용한다. 기본 값

left : 왼쪽에 떠다니는 요소를 허용하지 않는다.

right : 오른쪽에 떠다니는 요소를 허용하지 않는다.

both : 왼쪽 또는 오른쪽 둘 다에 떠다니는 요소를 허용하지 않는다.

inherit : 부모의 clear 값을 상속한다.

clear 속성이 가장 흔하게 쓰이는 방식은 요소에 float 속성을 쓴 이후이다.

요소가 왼쪽에 떠있다면 왼쪽에 clear를 해줘야한다.

다음 예제는 왼쪽에 떠있는 걸 지운다. 왼쪽에 있는 떠있는 요소를 허용하지 않는다는 의미이다.

clearfix란???

부모가 자식을 감싸고 있을 때 자식에게 float 속성이 적용되면 부모는 자식을 감싸지 않고 높이를 모르게 되는 것

부모 높이가 0px가 된다.

그래서 부모에 clear 속성을 써서 fix한다고 해서 clearfix다.

clearfix hack

요소가 포함하는 요소보다 크다면, 그리고 요소가 떠있다면 컨테이너의 바깥으로 벗어날 것이다.

첫번째 파인애플 이미지는 float:right로 오른쪽에 떠있는데 div보다 height가 커서 div를 벗어나게 된다.

해결하기 위해 div의 overflow 속성을 auto로 한다. 

https://www.w3schools.com/css/tryit.asp?filename=trycss_layout_clearfix

하지만 새로운 방식은 더 안전하게 사용할 수 있고 대부분의 페이지에서 쓰인다.

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

https://www.w3schools.com/css/tryit.asp?filename=trycss_layout_clearfix2

::after는 선택된 요소의 가상의 자식 요소를 가리킨다. 선택된 요소 다음에 뭔가를 삽입하고 싶을 때 쓴다.

Grid of Boxes / Equal Width Boxes

float 속성으로, 쉽게 컨텐츠의 박스들을 나란히 띄울 수 있다.

div는 block 요소라 한 줄을 다 차지한다. 그래서 float:left로 왼쪽에 떠있게 해주고 width를 화면 비율에 따라 조절되도록 33.33%로 맞춰준다.

https://www.w3schools.com/css/tryit.asp?filename=trycss_float_boxes

box-sizing???

float를 이용해서 박스를 나란히 놓을 수 있다. 그러나 각 상자의 너비를 확대하는 항목(패딩 테두리)를 추가하면 박스가 나란하게 놓이지 않는다.

box-sizing은 박스의 전체 너비(높이) 안에 padding과 border를 포함하도록 한다. padding이 박스 안쪽에 위치하도록 해주며 break되지 않는다.

Equal Height Boxes

float가 적용된 box들의 높이를 같게 해주려면 높이를 고정해주면 된다.

https://www.w3schools.com/css/tryit.asp?filename=trycss_float_boxes_height

그러나 이건 유연하지 않다. 박스들이 항상 같은 양의 컨텐츠를 가진다면 괜찮다. 그러나 많은 경우 그렇지 못하다. flexbox를 쓰면 가장 긴 박스에 맞게 박스가 자동으로 늘어난다.

https://www.w3schools.com/css/tryit.asp?filename=trycss_float_boxes_flex

flex-wrap: nowrap;은 뭐지.?

navigation menu

수평적 메뉴를 생성하기 위해 float과 함께 하이퍼링크 목록을 쓴다 

https://www.w3schools.com/css/tryit.asp?filename=trycss_float5

web layout

float 속성을 써서 전체 웹 레이아웃을 만드는 건 흔하다.

https://www.w3schools.com/css/tryit.asp?filename=trycss_layout_cols

https://www.w3schools.com/css/css_float.asp