float과 clear
float
- 요소가 문서의 흐름에서 제외되어 자신을 포함하고 있는 컨테이너의 왼쪽이나 오른쪽에 배치
- 다른 요소는 float 요소를 제외하고 흐름을 따라 배치
- none : 기본값
- left : 자신을 포함하는 박스의 왼쪽
- right : 자신을 포함하는 박스의 오른쪽
clear
- float 요소 이후에 표시되는 요소가 float을 해제하여 float 요소의 아래로 배치
- none : 기본값, 아래로 이동 X
- left : float이 left인 요소의 아래로 배치
- right : float이 right인 요소의 아래로 배치
- both : float이 left, right인 요소의 아래로 배치
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>float, clear</title>
<style>
#a{ width:100px; height: 50px;
background-color: darkgreen;
float: right;}
#b{ width:100px; height: 100px;
background-color: darkmagenta;
float: left;}
p{
clear: both;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
<p>p 태그</p>
<p>p 태그</p>
<p>p 태그</p>
<p>p 태그</p>
<p>p 태그</p>
</body>
</html>
ISTJ의 재미없는 velog