Float는 편집 디자인에서 이미지를 삽화로 삽입할 때 사용하는 기법입니다. 또한 레이아웃을 잡을 때도 사용하는 기능이기 때문에 꽤 중요합니다.
float 기본
예제 - float.html
<!doctype html>
<html>
<head>
<style>
img{
width:300px;
float:left;
margin:20px;
}
p{
border:1px solid gray;
}
</style>
</head>
<body>
<img src="sample.mt.jpg" alt="">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate minus, obcaecati quia eaque perspiciatis! Vero cum libero architecto. Odit, et. Totam expedita
</p>
<p style="clear:both;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate minus, obcaecati quia eaque perspiciatis! Vero cum libero architecto. Odit, et. Totam expedita Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate minus, obcaecati quia eaque perspiciatis! Vero cum libero architecto. Odit, et. Totam expedita Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate minus, obcaecati quia eaque perspiciatis! Vero cum libero architecto. Odit, et. Totam expedita
</p>
</body>
</html>
float를 활용한 holy grail layout
예제 - float_2_holy_grail_layout.html
<!doctype html>
<html>
<head>
<style>
*{
box-sizing:border-box;
}
.container{
width:540px;
border:1px solid gray;
margin:auto;
}
header{
border-bottom: 1px solid gray;
}
nav{
float:left;
width:120px;
border-right:1px solid gray;
}
article{
float:left;
width:300px;
border-left:1px solid gray;
border-right:1px solid gray;
margin-left:-1px;
}
aside{
float:left;
width:120px;
border-left:1px solid gray;
margin-left:-1px;
}
footer{
clear:both;
border-top:1px solid gray;
text-align: center;
padding:20px;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>
CSS
</h1>
</header>
<nav>
<ul>
<li>position</li>
<li>float</li>
<li>flex</li>
</ul>
</nav>
<article>
<h2>float</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit quae earum enim ab distinctio corrupti eius reprehenderit non, rerum ut nisi autem cum sint perferendis eum id velit, molestias nesciunt. Ullam dignissimos consequuntur explicabo id voluptas vel deleniti nesciunt veritatis iusto commodi, laudantium cumque vero deserunt laboriosam. Ea, quia est?
</article>
<aside>
ad
</aside>
<footer>
copyleft
</footer>
</div>
</body>
</html>
