float와 clear 속성 예
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div { width: 100px; height: 100px; border: 1px solid #000000; margin: 5px; float: left}
#redbox { background: red;}
#greenbox { background: green;}
#bluebox { background: blue;}
#yellowbox { background: yellow;}
#blackbox { background: black;}
p { clear: both; }
#content { width:600px; padding: 10px; border: 2px dashed black}
</style>
</head>
<body>
<section id="content">
<h1>문서의 내용</h1>
<div id="redbox"></div>
<div id="greenbox"></div>
<div id="bluebox"></div>
<div id="yellowbox"></div>
<div id="blackbox"></div>
<p>after를 이해하시려면 여기를 삭제해 보세요</p>
</section>
</body>
</html>
위 코드를 실행시켰을 때 결과
div 태그 아래 텍스트를 삭제했을 때 결과
텍스트가 없더라도 다음 내용을 추가하면 박스가 정상적으로 그려진다.
#content:after { content: " "; display: block; clear: both; }
|