Life is but a dream

위와 같은 코드가 있다고 하면, 실제로 웹 브라우저에서는

겉에 있는 핫핑크의 박스가 두 박스를 감싸지 못한다.


이것을 해결하려면 아래와 같은 방법이 있다.
1. redbox와 bluebox의 아래쪽에 div를 하나 더 만들어서 clear:both;를 넣어 주는 방법.
2. pinkbox에도 float:left;를 넣어 주는 방법
3. pinkbox에 height값을 넣은 눈속임
4. clearfix

1~3번은 사용이 간단하지만, 어느 것도 사용에 제약이 있다.
     1. div를 추가로 넣어야 해서사용하기 어려운 경우가 있다.
     2. pinkbox 밖에서 다시 clear를 해 줘야 한다.
     3. 세로의 길이가 가변적이어야 할 때는 사용하지 못한다.

가장 제약이 없는 방법은, :after 를 사용한 4번이다.

CSS