float 제거

HTML

float 제거

기련이 2020. 5. 18. 17:50

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float 제거</title>
<style type="text/css">
.div1{
	float: left;
	width: 100px;
	heigth: 50px;
	margin: 10px;
	border: 3px solid green;
}
.div2{
	border: 1px solid red;
}
.div3{
	float: left;
	width: 100px;
	heigth: 50px;
	margin: 10px;
	border: 3px solid green;
}
.div4{
	border: 1px solid red;
	clear: both;
}
h3 {
	clear: both;
}
</style>
</head>
<body>
<h3>clear 없이 사용</h3>
<div class="div1">div1</div>
<div class="div2">div2 - div1 뒤에 있는 영역.</div>
<br>
<p/>
<h3>clear 사용</h3>
<div class="div3">div3</div>
<div class="div4">div4 - div3 뒤에 있는 영역.
	float가 초기화 되어 밑으로 이동했습니다.
	</div>
<hr>
</body>
</html>

clear 속성
float 속성이 적용되지 않기를 원하는 요소에 사용.
float 속성을 초기화 시킴.
clear: left; 또는 clear: right;
clear: both;(둘다 취소)