플로팅 레이아웃

플로팅(Floating) 레이아웃

• 일반적인 레이아웃 흐름(Normal Layout Flow)

• HTML이 기본적으로 화면에 렌더링하는 것을 말함. 마크업 순서대로 위에서 부터 아래 방향으로 나열(CSS 미반영)

• float 속성을 사용해 박스를 왼쪽(left) 또는 오른쪽(right)으로 "부유"시키는 레이아웃 기법.

<float> 속성

속성 : <none>(기본값), <left>, <right>

/* 부모요소는 float으로만 구성된 자식요소를 감싸지 못함*/
/* Clearfix, 가상요소를 사용해서 문제 해결가능*/
.box.is-blue {
  float: left;
  width: 200px;
}
.box.is-yellow {
  float: left;
}
.box.is-green {
  float: left;
}

.clear {
  clear: both;
}

<!-- 이해를 돕기위한 코드 많이 사용하지 X -->
  <div class="box-group">
    <div class="box is-blue"></div>
    <div class="box is-yellow"></div>
    <div class="box is-green"></div>
    <div class="clear"></div>
  </div>
</section>

<clear>

float를 해제시키는 속성 (부모요소가 자식을 감쌀 수 있게 함)

.clear {
  clear: none; /**/
  clear: left; /* float: left 해지 */
  clear: right; /*  */
  clear: both; /* 주로 많이 씀 */
}

가상 요소 <::after> 사용

.clearfix::after {
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
  height: 0; /* content가 높이를 가지게 되면 사용 */
}

참고

• CSS 레이아웃

• CSS 레이아웃을 배웁시다 - normal layout flow

• CSS 레이아웃을 배웁시다 - float

• CSS 레이아웃을 배웁시다 - clear

• CSS 레이아웃을 배웁시다 - clearfix

• CSS 레이아웃을 배웁시다 - float layout

• float을 clear하는 방법(clearfix)