- clear:both 를 사용하면 float으로 일그러진 레이아웃을 쉽게 초기화 가능
예시
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Property Basic</title>
<style>
</style>
</head>
<body>
<div id="header"><h1>Header</h1></div>
<div id="navigation"><h1>Navigation</h1></div>
<div class="clear"></div>
<div id="aside">
<h1>Aside</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p>
</div>
<div id="section">
<h1>Section</h1>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,</p>
</div>
<div class="clear"></div>
<div id="footer"><h1>Footer</h1></div>
<div class="clear"></div>
</body>
</html>출력
여기에 style을 추가하면
<style>
body {
width: 960px;
margin: 0 auto;
}
.clear {
clear: both;
}
#aside {
float: left;
width: 260px;
}
#section {
float: left;
width: 700px;
}
</style>출력
이게 왜 안되지? 이게 왜 되지?