📖CSS float 속성
부유하는 대상을 만들 때 사용하는 스타일 속성
📃float 속성 개요
| 키워드 | 설명 |
|---|---|
| left | 태그를 왼쪽으로 붙임 |
| right | 태그를 오른쪽으로 붙임 |
예시
<!DOCTYPE html>
<html>
<head>
<title>Float Style Property</title>
<style>
</style>
</head>
<body>
<img src="img/html .png">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
</body>
</html>출력
float 속성을 추가하면
예시
<style>
img {
float: left;
}
</style>출력
📃float 속성을 사용한 수평 정렬
예시
<!DOCTYPE html>
<html>
<head>
<title>Float Style Property</title>
<style>
.box {
width: 100px; height: 100px;
background-color: red;
margin: 10px; padding: 10px;
float: left;
}
</style>
</head>
<body>
<div class="box">1</div>
<div class="box">2</div>
</body>
</html>출력
- right 키워드 적용
예시
<style>
.box {
width: 100px; height: 100px;
background-color: red;
margin: 10px; padding: 10px;
float: right;
}
</style>출력
📃float 속성을 사용한 레이아웃 구성
자손에 float 속성을 적용하면 부모의 overflow 속성에 hidden 키워드를 적용
예시
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Property Basic</title>
<style>
</style>
</head>
<body>
<div id="hedader"><h1>Header</h1></div>
<div id="navigation"><h1>Navigation</h1></div>
<div id="wrap">
<div id="aside">
<h1>Aside</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div id="section">
<h1>Section</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div id="footer"><h1>Footer</h1></div>
</body>
</html>출력
- body 태그 중앙 정렬
예시
<style>
body {
width: 960px;
margin: 0 auto;
}
</style>출력
- 중앙 정렬 및 float 속성 사용
예시
<style>
#aside {
width: 200px;
float: left;
}
#section {
width: 760px;
float: left;
}
</style>출력
- 문제 발생
- Footer가 Section 밑에 붙었다.
- float 속성을 사용한 태그의 부모에 overflow 속성을 사용하고 hidden 키워드 적용
예시
<style>
#wrap {
overflow: hidden;
}
</style>출력
이게 왜 안되지? 이게 왜 되지?