float
- float
- 주로 레이아웃을 구성할 때 블록 레벨 요소를 가로 정렬하기 위해 사용되는 중요한 기법
- 이미지와 텍스트가 있을 때, 이미지 주위를 텍스트로 감싸기 위해 만들어짐
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: left;
margin-right: 10px;
}
</style>
</head>
<body>
<img src="https://poiemaweb.com/img/doug.jpg">
<div>The float property specifies whether an element should float to the left, right, or not at all.
Note: Absolutely positioned elements ignore the float property!
Note: Elements next to a floating element will flow around it. To avoid this, use the clear property or the clearfix hack.</div>
</body>
</html>-
float을 적용하면 해당 요소가 다른 요소 위에 떠 있게 함 (기본 레이아웃에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽으로 이동)
-
해당 요소의 position이 absolute일 때, float 사용 불가능
| property 값 | description |
|---|---|
| none | 요소가 떠 있게 하지 않음 (기본값) |
| right | 요소를 오른쪽으로 이동 |
| left | 요소를 왼쪽으로 이동 |
1. 정렬
- float 사용 X - 수직 정렬
- float: left; - 왼쪽부터 가로 정렬
- flota: right; - 오른쪽부터 가로 정렬
- 먼저 기술된 요소가 가장 오른쪽에 출력되므로, 출력 순서가 역순이 됨
<!DOCTYPE html>
<html>
<head>
<style>
.box {
color: white;
font-weight: bold;
font-size: 50px;
border-radius: 6px;
width: 100px;
height: 100px;
margin: 10px;
padding: 10px;
}
.d1, .d2 {
float: left;
}
.d1 {
background-color: red;
}
.d2 {
background-color: orange;
}
.d3, .d4 {
float: right;
}
.d3 {
background-color: red;
}
.d4 {
background-color: orange;
}
</style>
</head>
<body>
<div class="container">
<div class="box d1"> 1 </div>
<div class="box d2"> 2 </div>
<div class="box d3"> 3 </div>
<div class="box d4"> 4 </div>
</div>
</body>
</html>- float는 좌측, 우측 정렬만 가능
- 중앙 가로 정렬은 margin을 사용
div {
width: 960px;
margin: 0 auto;
}2. width
- width의 기본값은 100%이므로, width가 지정되지 않은 block 요소는 부모 요소의 가로폭을 가득 채움
<!DOCTYPE html>
<html>
<head>
<style>
.box {
color: white;
font-weight: bold;
font-size: 30px;
line-height: 50px;
height: 50px;
margin: 0 10px;
padding: 10px;
}
.d1 {
background-color: red;
}
.d2 {
background-color: orange;
}
</style>
</head>
<body>
<div class="box d1"> div </div>
<div class="box d2"> div </div>
</body>
</html>- width 선언하지 않은 block 요소에 float가 선언되면, width가 content에 맞게 최소화되고 다음 요소 위에 떠 있게 됨
<!DOCTYPE html>
<html>
<head>
<style>
.box {
color: white;
font-weight: bold;
font-size: 30px;
line-height: 50px;
height: 50px;
margin: 0 10px;
padding: 10px;
}
.d1 {
float: left;
background-color: red;
}
.d2 {
background-color: orange;
}
</style>
</head>
<body>
<div class="box d1"> float: left; </div>
<div class="box d2"> div </div>
</body>
</html>- d1 요소에는 float: left;를 선언하고, d2 요소에는 float를 선언하지 않음
- d1 요소는 width가 content에 맞게 최소화되고 다음요소인 d2 요소 위에 떠 있게 됨
- d2 요소는 float를 선언하지 않았기 때문에, width가 d1 요소가 차지한 width만큼 줄지 않고 100% 유지함
3. float 관련 문제 해결 방법
3.1 float 선언된 요소와 float 선언되지 않은 요소간 margin이 사라지는 문제
-
문제 : float 선언된 요소가 float 선언하지 않은 다음 요소 위에 떠 있는 상태에서는 두 요소 간 margin이 제대로 표현되지 않음
-
해결 방법 : float 선언하지 않은 요소에 overflow:hidden;을 선언함
- overflow: hidden; - float이 선언되지 않아서 제대로 표현되지 못하는 요소를 출력해줌
<!DOCTYPE html>
<html>
<head>
<style>
.box {
color: white;
font-weight: bold;
font-size: 30px;
line-height: 50px;
height: 50px;
margin: 0 10px;
padding: 10px;
}
.d1 {
float: left;
background-color: red;
}
.d2 {
overflow: hidden;
background-color: orange;
}
</style>
</head>
<body>
<div class="box d1"> float: left; </div>
<div class="box d2"> div </div>
</body>
</html>- 두번째 요소에도 float를 선언하면, overflow: hidden;을 선언하지 않아도 되지만 너비가 최소화됨
3.2 float 선언된 자식 요소를 포함하는 부모 요소의 높이가 정상적으로 반영되지 않는 문제
-
문제 : float 선언된 2개의 자식 요소를 포함하는 부모 요소의 높이가 비정상값을 가짐
- float 요소는 일반적인 흐름 상에 존재하지 않기 때문에, float 요소의 높이를 알 수 없음
- 그러므로 부모 요소 이후에 위치하는 요소의 정렬에서 문제가 발생함
<!DOCTYPE html>
<html>
<head>
<style>
.container {
color: white;
text-align: center;
padding: 10px;
background-color: #def0c2;
}
.d1, .d2 {
float: left;
width: 50%;
padding: 20px 0;
}
.d1 {
background-color: #59b1f6;
}
.d2 {
background-color: #ffb5b4;
}
</style>
</head>
<body>
<div class="container">
<div class="d1"> 1 </div>
<div class="d2"> 2 </div>
</div>
<div style="background:red;padding:10px;color:white"> 3 </div>
</body>
</html>- 해결 방법 1 : float 선언된 자식 요소의 부모 요소에 overflow: hidden;을 선언
.container {
...
overflow: hidden;
}<!DOCTYPE html>
<html>
<head>
<style>
.container {
color: white;
text-align: center;
padding: 10px;
background-color: #def0c2;
overflow: hidden;
}
.d1, .d2 {
float: left;
width: 50%;
padding: 20px 0;
}
.d1 {
background-color: #59b1f6;
}
.d2 {
background-color: #ffb5b4;
}
</style>
</head>
<body>
<div class="container">
<div class="d1"> 1 </div>
<div class="d2"> 2 </div>
</div>
<div style="background:red;padding:10px;color:white"> 3 </div>
</body>
</html>-
다른 방법들
-
부모 요소에 float 선언 -> 부모 요소의 너비가 float 선언된 2개의 자식 요소 content를 표현할 수 있을 만큼만으로 줄어듬 (권장 X)
-
부모 요소 영역이 끝나기 직전에 빈 요소를 만들고 clear: both;를 설정 <- 의미 없는 빈 요소를 사용해야함 (권장 X)
-
<!DOCTYPE html>
<html>
<head>
<style>
.container {
color: white;
text-align: center;
padding: 10px;
background-color: #def0c2;
}
.d1, .d2 {
float: left;
width: 50%;
padding: 20px 0;
}
.d1 {
background-color: #59b1f6;
}
.d2 {
background-color: #ffb5b4;
}
.clear {
height: 0;
clear: both;
}
</style>
</head>
<body>
<div class="container">
<div class="d1"> 1 </div>
<div class="d2"> 2 </div>
<div class="clear"></div>
</div>
<div style="background:red;padding:10px;color:white"> 3 </div>
</body>
</html>-
해결 방법 2 : ::after 가상 요소 선택자를 이용 (CSS2에서는 :after)
-
부모 요소에 사전에 작성한 clearfix 클래스를 추가하거나, 해당 요소를 선택하여 클리어 문법을 선언하면 됨
.clearfix:after {
content: "";
display: block;
clear: both;
}
/* or */
selector:after {
content: "";
display: block;
clear: both;
}<!DOCTYPE html>
<html>
<head>
<style>
.container {
color: white;
text-align: center;
padding: 10px;
background-color: #def0c2;
}
.clearfix:after {
content: "";
display: block;
clear: both;
}
.d1, .d2 {
float: left;
width: 50%;
padding: 20px 0;
}
.d1 {
background-color: #59b1f6;
}
.d2 {
background-color: #ffb5b4;
}
</style>
</head>
<body>
<div class="container clearfix">
<div class="d1"> 1 </div>
<div class="d2"> 2 </div>
</div>
<div style="background:red;padding:10px;color:white"> 3 </div>
</body>
</html>-
또 다른 방법 : 자식요소에 float 대신 display: inline-block;을 선언
- 주의해야할 점 : inline-block 요소를 연속 사용하는 경우, 두 요소 사이에 정의하지 않은 공백(4px)이 자동 지정됨
<!DOCTYPE html>
<html>
<head>
<style>
.container {
color: white;
text-align: center;
padding: 10px;
background-color: #def0c2;
}
.d1, .d2 {
display: inline-block;
width: 50%;
padding: 20px 0;
}
.d1 {
background-color: #59b1f6;
}
.d2 {
background-color: #ffb5b4;
}
</style>
</head>
<body>
<div class="container">
<div class="d1"> 1 </div>
<div class="d2"> 2 </div>
</div>
<div style="background:red;padding:10px;color:white"> 3 </div>
</body>
</html>-
문제 : display: inline-block; 선언한 두 요소가 가로 정렬 되지 않음
- 원인 : 두 요소 사이에 정의하지 않은 공백(4px)이 자동 지정되어 부모 요소의 width를 초과함 -
해결방법 : 부모 요소에 font: 0;을 선언하여 두 요소 사이에 정의하지 않은 공백 제거
<!DOCTYPE html>
<html>
<head>
<style>
.container {
color: white;
text-align: center;
padding: 10px;
background-color: #def0c2;
/*폰트 사이즈를 0으로 지정하여 두 요소 사이에 정의하지 않은 공백 제거*/
font-size: 0;
}
.d1, .d2 {
display: inline-block;
width: 50%;
padding: 20px 0;
/* 폰트 사이즈 재지정 */
font-size: 1rem;
}
.d1 {
background-color: #59b1f6;
}
.d2 {
background-color: #ffb5b4;
}
</style>
</head>
<body>
<div class="container">
<div class="d1"> 1 </div>
<div class="d2"> 2 </div>
</div>
<div style="background:red;padding:10px;color:white"> 3 </div>
</body>
</html>