Floating the box

.box {
  float: left;
  margin-right: 15px;
  width: 150px;
  height: 100px;
  border-radius: 5px;
  background-color: rgb(207, 232, 220);
  padding: 1em;
}

floating 된 엘리먼트는 normal layout flow에서 벗어나서 부모 엘리먼트의 왼쪽에 붙는다.

그 후, normal layout flow에 포함되어있으면서 floating 된 엘리먼트의 뒤에 오는 모든 content는 floating 된 엘리먼트를 둘러싼다.

content는 floating 된 엘리먼트의 상단까지 비어있는 공간을 채운다.

Visualizing the float

floating 된 엘리먼트에 margin을 적용하면 텍스트를 밀어낼 수 있지만,
그 반대는 불가능하다.

즉, 텍스트에 margin을 적용해서 floating 된 엘리먼트를 밀어낼 수 없다.

floatging 된 엘리먼트는 normal layout flow에서 벗어났기 때문이다.

위 예제의 첫 번째 문단에 special 클래스를 추가하면 아래와 같이 된다.

.special {
  background-color: rgb(79, 185, 227);
  padding: 10px;
  color: #fff;
}

Clearing floats

우리는 floating 된 엘리먼트가 normal layout flow에서 제거되고 다른 엘리먼트들이 옆에 표시되는걸 봤다.

만약 floating 된 엘리먼트 뒤에 오는 엘리먼트가 위로 이동하는 것을 중지하려면 clear 프로퍼티를 이용하면 된다.

The problem

만약 부모 박스의 자식으로 floating 된 엘리먼트와 일반 엘리먼트가 있다고 할때, 부모 박스의 크기는 floating 된 엘리먼트와 무관하게 설정된다.

즉, floating 된 엘리먼트가 부모 박스외부로 삐져나올수가 있다.

<div class="wrapper">
  <div class="box">Float</div>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
    aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
    pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
    ultricies tellus laoreet sit amet.
  </p>
</div>

.wrapper {
  background-color: rgb(79, 185, 227);
  padding: 10px;
  color: #fff;
}

이런 현상을 해결하기 위한 방법으로 3가지가 있다.

• clearfix hack

• overflow

• root-flow

앞의 2가지는 옛날 방식이고 나머지 1가지는 최신 방식이다.

The clearfix hack

이 방법은 전통적으로 이 상황을 처리하는 방식이며 clearfix hack으로 불린다.

부모 박스의 맨 끝부분에 가상의 엘리먼트를 추가하여 거기서 clear 를 적용하는 것이다.

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

Using overflow

두 번째 방법으로는 부모 박스에 overflow 프로퍼티를 visible 이외의 값으로 선택해서 설정하는 것이다.

.wrapper {
  background-color: rgb(79, 185, 227);
  padding: 10px;
  color: #fff;
  overflow: auto;
}

clear 프로퍼티가 없어도 잘 동작되는 이유는 overflow 프로퍼티가 BFC를 생성하기 때문이다.

하지만 이 방법은 원치않는 스크롤바를 생성할 수 있고 또는 그림자가 잘려 보일 수 있다.

또한 float를 다루기에는 overflow 라는 이름이 연관성이 없기때문에 차후 유지 보수때 어려움을 겪을 수 있다.

display: flow-root

이 문제를 해결하는 가장 최신 방식으로는 display 프로퍼티의 값으로 flow-root 를 설정하는 것이다.

이 방법은 오직 BFC만을 만든다.

.wrapper {
  background-color: rgb(79, 185, 227);
  padding: 10px;
  color: #fff;
  display: flow-root;
}

[참고] : MDN