CSS 레이아웃 - 플로팅 및 삭제

float 속성

가장 간단한 용도로이 float속성을 사용하여 이미지 주위의 텍스트를 줄 바꿈 할 수 있습니다.

다음 예제에서는 이미지가 텍스트의 오른쪽에 떠 있어야한다고 지정합니다.

예

img {

    float: right;

    margin: 0 0 10px 10px;

}

<!DOCTYPE html>

<html>

<head>

<style>

img {

    float: right;

    margin: 0 0 10px 10px;

}

</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="w3css.gif" alt="W3Schools.com" width="100" height="140">

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>