1. float
float : 박스를 옆으로 나열할 때 사용(떠다니는) / 레이아웃을 나영ㄹ하거나 형성+삽화를 넣을 때 사용
left : 왼쪽부터 나열
right : 오른쪽부터 나열
none : 기본값 / 적용하지 x
예시코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
border : 5px solid black;
}
img{
float : right;
}
</style>
</head>
<body>
<div>
<img src="jpg/ex4.jpg" alt="이미지">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium quo enim, iure tempore, deserunt ipsa facere perspiciatis mollitia repellat incidunt, ipsum voluptate reprehenderit nostrum distinctio vero perferendis repudiandae rem molestias.
</div>
<h1>hello world</h1>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
</p>
</body>
</html>2. clear
claer : float 속성과 함께 사용. float 속성을 제거할 때 사용
left : 좌측 나열 제거
right : 우측 나열 제거
both : 양쪽 나열 제거
예시코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
float:left;
}
p{
clear : both;
}
</style>
</head>
<body>
<h1>hello world</h1>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
</p>
</body>
</html>