float

 

<style>
	/*div {
		padding:20px;
		margin:10px;
	}*/
	#box1, #box2, #box3, #box4, #box5 {
		padding:20px;
		margin:10px;
	}
	#box1{
		background:#ffd800;
		float:left;
	}
	#box2 {
		background: #007700;
		float:right;
	}
	#box3 {
		background: #00ff00;
	}
	#box4 {
		background:#0077ff;
		float:left;
	}
	#box5 {
		background:#ff77ff;
		clear:left;
	}
</style>

<div id="box1">박스1</div>
<div id="box2">박스2</div>
<div id="box2">박스2</div>
<div id="box3">박스3</div>
<div id="box3">박스3</div>
<div id="box1">박스1</div>
<div id="box1">박스4</div>
<div id="box5">박스5</div>

박스1

박스2

박스2

박스3

박스3

박스1

박스4

박스5

 

2022.11.14 - float을 이용한 화면 layout 구성 Ex