CSS 레이아웃 Normal Flow & Floats

CSS 페이지 레이아웃 기법 중 normal flow는 페이지 레이아웃을 제어하는 어떠한 것도 하지 않으면, 브라우저가 기본적으로 HTML을 레이아웃하는 방법입니다. (링크)

<p>I love my cat.</p>
    
<ul>
  <li>Buy cat food</li>
  <li>Exercise</li>
  <li>Cheer up friend</li>
</ul>
    
<p>The end!</p>

HTML이 소스 코드에 나타나는 정확한 순서대로 표시되고 있습니다. CSS를 사용하여 레이아웃을 잡으면, 작업 요소를 normal flow에서 분리해 독립적으로 위치 수정이 가능합니다. CSS에서 요소 배치를 변경할 수 있는 방법은 다음과 같습니다.

• display: block, inline, inline-block
• float
• position
• table
• flex
• grid

Floats

float 속성은 본래는 이미지와 텍스트 배치 용도(메거진 스타일)로 등장했지만, 요즘에는 레이아웃을 만들기 위해 많이 사용하고 있습니다. float 속성은 block 레벨 엘리먼트의 행동을 바꿉니다. 왼쪽 또는 오른쪽으로 이동하며 normal flow로 부터 제거가 됩니다. float이 적용된 엘리먼트 뿐만 아니라, 주위를 둘러싸고 있는 엘리먼트 또한 float된 엘리먼트를 감싸게 만듭니다. (링크)

<h1>Simple float example</h1>
    
<div class="box">Float</div>
    
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
.box {
    float: left;
    width: 150px;
    height: 150px;
    margin-right: 30px;
}

clear 속성을 사용하면, float된 엘리먼트 주변 요소에게 float 속성을 무시하라고 말해줍니다. clear이 적용된 엘리먼트는 float이 적용된 엘리먼트 바로 뒤에 위치하게 됩니다. clear 속성은 block 요소에만 적용이 됩니다.

float된 엘리먼트를 포함하고 있는 부모 요소의 높이값은 0이 되어버립니다.