1 개요[ | ]
- CSS float Property
- CSS float 속성
- 띄움 속성
2 값 목록[ | ]
- none: 안 띄움. 한줄씩 차지함 (기본값)
- left: 왼쪽으로 띄움
- right: 오른쪽으로 띄움
3 예시[ | ]
html
Copy
<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>