CSS float으로 block 요소 좌우로 배치

레이아웃을 구성할 때 float을 사용하곤 합니다. 본 글에서는 float를 이용하여, 블록(block) 요소를 좌우로 배치하는 방법에 대해 소개합니다.

 

float 속성

현재는 flex나 grid를 사용하여 레이아웃을 많이 구성하지만, 이전에는 float를 이용하여 레이아웃을 많이 구성했습니다. float는 요소를 띄워서 값으로 left, right로 왼쪽 혹은 오른쪽으로 배치할 수 있습니다.

.left {
    float: left;
}
.right {
    float: right;
}

 

float로 좌우 배치

2개의 box를 만들고, 각각 float: left와 float: right 스타일을 적용합니다.

 

하지만, container 요소에 border 값을 설정했는데, border를 보면 box를 감싸고 있지 않습니다. float를 사용하면 요소가 떠있게되어 마치 내부에 box가 없는 것과 같이 보이게 됩니다.

 

See the Pen Untitled by taehong.kim (@taehongdev) on CodePen.

 

 

 

아래 코드는 이를 해결하기 위해 일반적으로 많이 사용하는 방식입니다. ::after에 clear: both;를 사용합니다.

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

 

 

See the Pen Untitled by taehong.kim (@taehongdev) on CodePen.