플로팅 레이아웃

플로팅(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가 높이를 가지게 되면 사용 */
}

참고

Previous레이아웃 Next포지셔닝 레이아웃

Last updated 3 years ago