728x90
float속성은 원래 이미지와 텍스트 배치 용도로 등장했지만, 요즘은 웹 페이지의 레이아웃을 작성할 때 자주 사용된다.
float의 속성 값에는 left, right, none, inherit가 있다.
clear 속성은 이후에 등장하는 요소들이 float 속성에 영향을 받지 않도록 한다.
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.div1 {
float: left; width: 100px; height: 40px;
margin: 0px; border: 3px solid green;
}
.div2 {
border: 1px solid red; height: 50px;
}
.div3 {
clear: both;
}
</style>
</head>
<body>
<h2>float 속성 사용</h2>
<div class="div1">div1</div>
<div class="div2">div2 - float 속성을 사용하여 대상 요소를 웹 문서에 배치함</div>
<div class="div1">다시 한번 div1</div>
<div class="div3">clear를 통해서 초기화함</div>
</body>
</html>
div1클래스의 div이 화면의 왼쪽에 배치된다.
배치한 이후에 화면의 공간이 남는다면, 다음 html요소가 자동으로 올라온다.
div1클래스의 div를 다시 한번 왼쪽에 배치하였다.
이 다음 요소인 div3클래스의 div태그의 clear: both를 하여 float 속성을 없앴다.
따라서, div3클래스의 div태그는 div1클래스의 div태그의 float 속성에 영향을 받지 않는다.
728x90