float
float 속성은 요소가 띄워지게(floating) 만드는 속성이다. 기본적으로 left 또는 right을 입력하게 되는데 left를 입력할 때는 해당 컨텐츠가 왼쪽으로, right을 입력할 때는 해당 컨텐츠가 오른쪽으로 뜨게(?) 된다.
문제는 💢
float 속성을 가진 요소는 떠버리는 속성으로 인해 쉽게 영역을 벗어나게 된다. 이를 해결하는 방법에 대해 알아보자.
부모태그에 overflow: hidden 사용
자식태그에 width, float 속성을 주고 부모태그에 overflow: hidden를 사용하는 것이다.
overflow가 float 속성으로 인해 떠있는 자식 태그들을 모두 잡아 영역을 만들어주는 역할을 한다. 만약 부모태그에서 overflow: hidden을 없애게 되면 자식영역을 잃고 자신의 영역도 잃게 된다.
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
.container {width: 960px; margin: 0 auto;}
.header { height: 20px; background-color: red;}
.nav { height: 20px; background-color: green;}
.footer { height: 20px; background-color: blue;}
.center {
overflow: hidden; 📌
}
.aside {
height: 200px;
background-color: blueviolet;
width: 30%; 📌
float: left; 📌
}
.section {
height: 200px;
background-color: cornflowerblue;
width: 70%; 📌
float: left; 📌
}
</style>
</head>
<body>
<div class="container">
<div class="header"></div>
<div class="nav"></div>
<div class="center">
<div class="aside"></div>
<div class="section"></div>
</div>
<div class="footer"></div>
</div>
</body>
</html>위의 코드를 실행하면 아래와 같은 결과를 얻을 수 있다. 부모태그인 center가 자식들을 감싸서 영역을 잡고 있다.
clear
영역을 나누고자 하는 부분에 div 태그를 하나 넣어줌으로써 '막'을 형성한다. 그리고 그 div에 clear: both 속성을 줌으로써 영역을 나누어 줄 수 있다. 아래 예시에서는 container와 footer 사이에 div 태그를 넣어주어 아래 결과페이지와 같이 영역을 나눌 수 있었다.
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
body {
width: 500px;
margin: 0 auto;
}
.aside {
width: 200px;
float: left;
}
.section {
width: 300px;
float: left;
}
.clear {
clear: both; 📌
}
</style>
</head>
<body>
<div class="header">
<h1>header</h1>
</div>
<div class="container">
<div class="aside">
<h1>Aside</h1>
<p>Lorem Ipsum is ... </p>
</div>
<div class="section">
<h1>Section</h1>
<p>Lorem Ipsum is ... </p>
</div>
</div>
<div class="clear"></div> 📌
<div class="footer">
Lorem Ipsum ...
</div>
</body>
</html>
굳이 div 태그를 끼워넣지 않고 영역을 감싸고자 하는 부모태그 즉, 위의 코드에서 container 라는 부모태그 뒤에 after 라는 가상선택자를 사용하는 방법도 있다.
.container::after { clear: both; content: ''; display: block; }
