float?

Posted by : on

Category : Frontend1

float는 언제쓰지??

float는 CSS에서 요소를 왼쪽 또는 오른쪽으로 정렬하여 텍스트나 다른 요소들이 그 주위를 감싸도록 하는 속성이다. 원래는 이미지와 텍스트를 함께 배치하기 위해 사용되었으나, 레이아웃을 만들 때에도 자주 사용된다.

<div class="container">
  <div
    class="box"
    style="float: left; width:auto; height:auto; background-color: lightblue;"
  >
    Left Float
  </div>
  <div
    class="box"
    style="float: right; width:auto; height:auto; background-color: lightcoral;"
  >
    Right Float
  </div>
  <div class="content" style="background-color: lightgray; height:auto;">
    This is some content that flows around the floated elements.
  </div>
</div>
Left Float
Right Float
This is some content that flows around the floated elements.