[TIL] float에 대해서

min00young·2020년 10월 21일
0

목표

  • html에서 layout을 잡는 float에 대해서 알아봅니다.

intro

float는 html의 레이아웃을 잡는데 유용하게 사용했던 속성입니다. 최근에는 flex를 이용하여 레이아웃을 잡고 있지만, float를 이용함으로써 얻게되었던 좋았던것과 flex로 흐름이 넘어가게 되었던 단점에 대해서 기록합니다.

float란

float 속성은 이미지 주위를 텍스트로 감싸기 위해 만들어진 것입니다. float속성을 통해서 텍스트의 오른쪽으로 이미지가 배치가 되었습니다.

float속성값들은 left, right, none 으로 설정이 가능합니다.


<!DOCTYPE html>
<html>
<head>
<style>
img {
  float: right;
}
</style>
</head>
<body>

<p>In this example, the image will float to the right in the paragraph, and the text in the paragraph will wrap around the image.</p>

<p><img src="https://www.w3schools.com/css/pineapple.jpg" alt="Pineapple" style="width:170px;height:170px;margin-left:15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>

</body>
</html>

float속성의 단점(clear설정)

float 속성으로 인해서 이미지를 담고 있는 엘리먼트 영역을 침범해서 배치되는 경우가 있는데 이를 해제하기 위해 clear 속성을 사용합니다.

clear 속성이 지정된 영역 이후로는 더 이상 float가 작동하지 않습니다.

profile
개발공부를 하면서 배우고 경험하고 앞으로 알아가야할것들에 대해서 정리하고 있습니다 🙂

0개의 댓글