[CSS] float 속성

CSS

[CSS] float 속성

UnoCode 2020. 6. 23. 19:06

float 라는 단어는 "뜨다" 라는 의미 입니다.

원래 웹페이지에서 이미지를 어떻게 띄워서 택스트와 함깨 배치할 것인가에 대한 속성입니다.

이말은 즉슨 신문기사 같은 사이트에 많이 사용 한다는 예시 입니다.

<html>
<head>
<style>
	.ex-layout{ height: 310px }
	.menu{
		width: 300px;
		height: 40px;
		border: 2px solid #09c;
		background-color: #d7f5ff;
	}
	.main .left-menu{
		float: left;
		width: 50px;
		height: 254px;
		border: 2px solid red;
		background-color: #ffe7d5;
	}
	.main .content{
		float: left;
		width: 250px;
		height: 250px;
	}
	.main .content .article{
		height: 200px;
		border: 2px solid blue;
		background-color: #e2e9ff;
	}
	.main .content .comment{
		height: 50px;
		border: 2px solid purple;
		background-color: #ffddff;
	}
</style>
</head>
<body>
	<div class="ex-layout">
		<div class="menu">global menu</div>
		<div class="main">
			<div class="left-menu">left menu</div>
			<div class="content">
				<div class="article">article</div>
				<div class="comment">comment</div>
			</div>
		</div>
	</div>
</body>
</html>

아래의 결과 입니다.

해당 결과 값이 이해가 되신다면 넘어 가시면 됩니다.