CSS float 속성

1 개요[ | ]

CSS float Property
CSS float 속성

띄움 속성

2 값 목록[ | ]

none: 안 띄움. 한줄씩 차지함 (기본값)
left: 왼쪽으로 띄움
right: 오른쪽으로 띄움

3 예시[ | ]

예제: http://zetawiki.com/ex/css/float.php

<style>
.container {
  height: 100px;
  background-color: silver;
  margin: 5px;
}
.container1 > .box { float: none; }
.container2 > .box { float: left; }
.container3 > .box { float: right; }

.box { width: 40px; height: 40px; }
.box-a { background-color: red; }
.box-b { background-color: yellow; }
</style>
 
<div class='container container1'>
  <div class='box box-a'>A1</div>
  <div class='box box-b'>A2</div>
</div>
 
<div class='container container2'>
  <div class='box box-a'>B1</div>
  <div class='box box-b'>B2</div>
</div>
 
<div class='container container3'>
  <div class='box box-a'>C1</div>
  <div class='box box-b'>C2</div>
</div>

4 같이 보기[ | ]

5 참고[ | ]