# float
- 레이아웃을 구성할 때 블록레벨 요소를 가로 정렬하기 위해서 사용합니다
/* content */.content {
border: 1px solid gray;
width: 50%;
padding: 10px;
}
.logo {
float: left;
}
/* box */
.box-area {
border: 1px solid #000000;
width: 50%;
}
.box {
border: 1px solid silver;
width: 100px;
height: 100px;
font-size: 20px;
font-weight: bold;
}
.red { background-color: red;}
.green { background-color: green;}
.blue { background-color: blue;}
.orange { background-color: orange;}
.red, .green {
float: left;
}
.blue, .orange {
float: right;
}<body>
<h1>float</h1>
<br/>
<h2>float</h2>
<div class="content">
<p class="logo"><img src="../08-position/image/img/html5.jpg"/></p>
<p>
HTML5 content HTML5 content HTML5 content HTML5 content HTML5 content HTML5 content
HTML5 content HTML5 content HTML5 content HTML5 content HTML5 content HTML5 content
HTML5 content HTML5 content HTML5 content HTML5 content HTML5 content HTML5 content
HTML5 content HTML5 content HTML5 content HTML5 content HTML5 content HTML5 content
HTML5 content HTML5 content HTML5 content HTML5 content HTML5 content HTML5 content
</p>
<p>
CSS float CSS float CSS float CSS float CSS float CSS float CSS float CSS float CSS float
CSS float CSS float CSS float CSS float CSS float CSS float CSS float CSS float CSS float
</p>
</div>
<br/>
<hr/>
<h2>float box</h2>
<div class="box-area">
<div class="box red">red</div>
<div class="box green">green</div>
<div class="box blue">blue</div>
<div class="box orange">orange</div>
</div>
</body>
코딩 일기장