Float Layout

float element를 이용한 간단하게 만들어본 6가지 레이아웃
float layout

해당 내용은 float-layout을 숙지해야 합니다.
float:left;을 사용시 레이아웃이 좌측으로 정렬됩니다.
float:left;는 display:inline-block과 큰 차이점이 있습니다.
float은 글자와 섞이며 float 다음에 clear를 하지 않으면 float 요소의 높이를 인식할 수 없습니다.
무슨 말인지 모르겠으면 다음의 규칙을 "외우면" 됩니다.

float 규칙

  • <parent>
    <child></child>
    <child></child>
    </parent>
  • childfloat을 했을 경우
    parentparent:after{content:"";display:block;clear:both;}를 해준다.
  • 때로는 이해하기보다 외우는게 편리할 때가 있습니다...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
	* {margin:0;padding:0;}
	#header{height:100px;background:#0d0;}
	#visual{background:#3e3;height:300px;}
	#footer{height:80px;background:#1c1;}
	#content{height:400px;background:#fff;}
	#content>div{height:100%;float:left;}
	#content:after{content:"";display:block;clear:both;}
	.content-left{width:30%;}
	.content-left div{height:25%;}
	.content-left div:nth-child(1){background:#7e7;}
	.content-left div:nth-child(2){background:#9e9;}
	.content-left div:nth-child(3){background:#beb;}
	.content-left div:nth-child(4){background:#ded;}
	.content-center{width:40%;background:#5e5;}
	.content-right{width:30%;}
	.content-right div{height:50%;}
	.content-right div:nth-child(1){background:#7e7;}
	.content-right div:nth-child(2){background:#9e9;}
</style>
</head>
<body>
<div class="wrap">
	<header id="header"></header>
	<section id="visual"></section>
	<section id="content">
		<div class="content-left">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
		<div class="content-center"></div>
		<div class="content-right">
			<div></div>
			<div></div>
		</div>
	</section>
	<footer id="footer"></footer>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
	* {margin:0;padding:0;}
	ul,li{list-style:none;}
	#header{height:100px;background:#00d;width:70%;margin:15px auto;}
	#visual{background:#33e;height:400px;}
	#visual ul{width:25%;margin-left:75%;height:100%;}
	#visual li{height:25%;}
	#visual li:nth-child(1){background:#77e;}
	#visual li:nth-child(2){background:#99e;}
	#visual li:nth-child(3){background:#bbe;}
	#visual li:nth-child(4){background:#dde;}
	#footer{height:80px;background:#11c;}
	#content{background:#fff;}
	#content>div{float:left;width:48%;height:300px;margin:1%;background:#99e;}
	#content:after{content:"";display:block;clear:both;}
</style>
</head>
<body>
<header id="header"></header>
<section id="visual">
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</section>
<section id="content">
	<div></div>
	<div></div>
</section>
<footer id="footer"></footer>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
	* {margin:0;padding:0;}
	ul,li{list-style:none;}
	#header{height:100px;background:#a00;}
	#visual{background:#a33;height:300px;}
	#footer{height:80px;background:#911;}
	#content{background:#fff;height:400px;}
	#content>div{float:left;width:50%;height:100%;}
	#content:after{content:"";display:block;clear:both;}
	.content-left>div{height:50%;}
	.content-right{background:#a77;}
	.left-top{background:#c99;}
	.left-btm>div{float:left;width:50%;height:100%;}
	.left-btm:after{content:"";display:block;clear:both;}
	.btm-left{background:#c55;}
	.btm-right{background:#c33;}
</style>
</head>
<body>
<header id="header"></header>
<section id="visual"></section>
<section id="content">
	<div class="content-left">
		<div class="left-top"></div>
		<div class="left-btm">
			<div class="btm-left"></div>
			<div class="btm-right"></div>
		</div>
	</div>
	<div class="content-right"></div>
</section>
<footer id="footer"></footer>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
	* {margin:0;padding:0;}
	ul,li{list-style:none;}
	#header{height:100px;background:#0aa;}
	#visual{background:#5cc;height:300px;}
	#footer{height:80px;background:#1cc;}
	#content{background:#fff;height:400px;}
	#content>div{float:left;width:50%;height:100%;}
	#content:after{content:"";display:block;clear:both;}
	.content-left>div:nth-child(1){height:70%;background:#7cc;}
	.content-left>div:nth-child(2){height:30%;background:#9cc;}
	.content-right>div:nth-child(1){height:30%;background:#acc;}
	.content-right>div:nth-child(2){height:70%;background:#7bb;}
</style>
</head>
<body>
<header id="header"></header>
<section id="visual"></section>
<section id="content">
	<div class="content-left">
		<div></div>
		<div></div>
	</div>
	<div class="content-right">
		<div></div>
		<div></div>
	</div>
</section>
<footer id="footer"></footer>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
	* {margin:0;padding:0;}
	ul,li{list-style:none;}
	#header{background:#a0a;}
	#logo{font-size:50px;font-weight:bold;color:#fff;text-align:center;height:100px;line-height:100px;}
	#gnb:after{content:"";display:block;clear:both;}
	#gnb li{width:20%;float:left;padding:5px;box-sizing:border-box;}
	#gnb a{display:block;text-align:center;line-height:50px;height:50px;background:#fff;}
	#visual{height:250px;background:#d6d}
	#content{height:400px;}
	#content:after{content:"";display:block;clear:both;}
	#content>div{float:left;width:50%;height:100%;}
	.content-left{background:#d9d;}
	.content-right{background:#d5d;}
	#footer{height:80px;background:#c0c;}
</style>
</head>
<body>
<header id="header">
	<div id="logo">LOGO</div>
	<ul id="gnb">
		<li><a href="#">menu1</a></li>
		<li><a href="#">menu2</a></li>
		<li><a href="#">menu3</a></li>
		<li><a href="#">menu4</a></li>
		<li><a href="#">menu5</a></li>
	</ul>
</header>
<section id="visual"></section>
<section id="content">
	<div class="content-left"></div>
	<div class="content-right"></div>
</section>
<footer id="footer"></footer>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
	* {margin:0;padding:0;}
	ul,li{list-style:none;}
	#header{height:100px;background:#aa0;}
	#visual{height:250px;background:#cc6;}
	#content{height:400px;overflow:hidden;}
	#content>div{height:100%;transform:rotateZ(60deg) translateY(-200%);}
	#content>div:after{content:"";display:block;clear:both;}
	#content>div>div{float:left;width:50%;height:600%;}
	.content-left{background:#dd9;}
	.content-right{background:#dd5;}
	#footer{height:80px;background:#cc0;}
</style>
</head>
<body>
<header id="header"></header>
<section id="visual"></section>
<section id="content">
	<div>
		<div class="content-left"></div>
		<div class="content-right"></div>
	</div>
</section>
<footer id="footer"></footer>
</body>
</html>