float 속성
- 해당 html 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어준다
- 본래는 이미지와 글자를 함께 출력하는 목적으로 만들어졌지만, 현재는 웹 페이지의 레이아웃을 잡을 때 사용
- float 스타일 속성이 적용된 요소는 컨테이닝 블록 안쪽의 왼쪽 또는 오른쪽에 배치
(컨테이닝 블록 : 그 요소와 가장 가까운 block 레벨 조상 요소의 콘텐츠 영역) - float 스타일 속성이 적용된 요소는 문서의 일반적인 흐름에서 제거되므로 부모 요소의 콘텐츠로 인식되지 않는다
(모든 자식 요소들에 float 스타일 속성이 설정되면, 부모 요소의 콘텐츠가 없어진다) - 다른 콘텐츠는 float 스타일 속성이 적용된 요소의 영역을 피해서 배치
float 속성 문제점
float 속성을 가진 요소는 부모요소의 영역을 벗어나서 부모요소의 콘텐츠로 인식되지 않는다
해당 문제점을 해결방법은 5가지가 존재한다.
.
- '부유하는 요소'들을 담고있는 요소의 높이 고정 = 부모요소의 높이 고정
- '부유하는 요소'들을 담고 있는 요소에 float 속성 적용
- '부유하는 요소'들을 담고 있는 요소에 overflow 속성 적용 = { overflow : hidden; )
(overflow : content의 크기가 해당 요소를 감싸고 있는 컨테이너 요소보다 클 때 어떻게 처리할지를 설정) - '부유하는 요소' 다음에 clear 속성을 갖는 빈 요소를 추가
- '부유하는 요소'들을 담고 있는 요소에 after 가상 요소 선택자를 사용해 clear 속성 적용
#box::after{content : ""; display : block; clear : both;}
clear 속성은 float 속성이 적용된 이휴에 나타나는 요소들의 동작 조절
컨테이너 요소에 float 속성이 적용되면 그 이후에 등장하는 모든 요소들은 정확한 위치를 설정하기가 매우 힘들다
따라서 float 속성을 적용하고자 하는 요소가 모드 등장한 이후에는 clear 속성을 사용하여, 이후에 등장하는 요소들이 더는 float 속성에 영향을 받지 않도록 설정해줘야 한다.
1. 가상요소는 인라인 형식의 요소이다
2. 여기에서는 블록 형식의 요소가 필요하므로 display 속성을 통해 블록 형식의 요소로 만든다
3. clear 속성으로 인해 가상요소는float 속성이 적용된 요소 아래로 떨어지게 된다.
4. 이로 인해 부모 요소는 float 속성이 적용된 요소와 가상요소를 포함하는 영역을 차지하게 된다
예제1 - 부모요소의 높이 고정
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>float</title>
<style>
#container{
width: 640px;
padding: 20px;
border: 2px solid black;
margin: 0 auto;
}
#container > div{
height: 200px;
font-size: 1.2em;
font-weight: bold;
text-align: center;
line-height: 200px;
}
#container > div:last-child > div{
float: left;
width: 200px;
height: 200px;
}
.red{background-color: red; margin-bottom: 20px;}
.orange{background-color: orange;}
.yellow{background-color: yellow;}
.green{background-color: green;}
#container > div:last-child > div:not(:last-child){margin: 0 20px 0 0;}
</style>
</head>
<body>
<div id="container">
<div class="red">red</div>
<div id="box">
<div class="orange">Orange</div>
<div class="yellow">Yellow</div>
<div class="green">Green</div>
</div>
</div>
</body>
</html>
▼ 소스코드 살펴보기
17 : #box요소의 높이 고정
26 : 형제요소들을 나란히 배치하기 위해 float 요소 사용
36 : 컨테이너의 자식 요소 div 중 마지막 자식요소에게는 margin 적용시키고 그 자식 요소의 마지막 div에게는 적용하지 않는다
실행결과
예제2 - 가상 요소 선택자를 사용해 clear 속성 적용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>float</title>
<style>
#container{
margin: 100px auto;
width: 680px;
border: 3px solid blue;
background-color: #cecdfd;
padding: 1em;
}
.box{
width: 200px;
height: 200px;
border: 3px solid red;
background-color: #fce1e1;
margin: 10px;
text-align: center;
line-height: 200px;
font-size: 2em;
font-weight: bold;
float: left;
}
#container::after{
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div id="container">
<div class="box">Box1</div>
<div class="box">Box2</div>
<div class="box">Box3</div>
</div>
</body>
</html>▼ 소스코드 살펴보기
29 : 형제 요소들을 나란히 배치하기 위해 float 스타일 속성 설정
32 : 모든 자식 요소에 float 스타일 속성이 적용된 경우 부모 요소의 영역을 잡아주기 위해 가성 요소를 추가하고 clear 스타일 속성을 설정
33 : ::before, ::after 가상 요소에는 반드시 content 속성을 설정해야한다. 만약 설정하지 않으면 요소가 표시되지 않는다. 따라 빈 값이라도 설정해야한다.
34 : ::before, ::after 가상 요소는 인라인 형식의 요소이다. 여기서는 블록형식의 요소가 필요함으로 표시 형식을 설정한다.
35 : 가상요소에 clear 스타일 속성을 설정해 float 된 상활을 해제한다.
실행결과
float 속성은 부모의 높이를 잡아주는게 제일 중요하다고 생각한다.
브라우저에서 보기에는 문제가 없어보이지만, 소스들이 더 길어지고 다양한 요소들이 나오면 원하는 곳에 배치하기 어려울수도 있다.
저는 float를 사용했다면 DOM에서 부모요소의 높이가 잡혀있는지 확인하고 안잡혀 있으면 잡아주는 편이다.
부모의 높이는 잡는 방법은 위에서 설명했든 6가지의 방법이 있는데 중복되지 않도록 사용하는게 좋겠죠?
그럼 오늘은 여기에서 마무리를 하고 더 궁금한 내용은 댓글에 남겨주시면 알려드리도록 하겠습니다.
궁금하신 점이나 이해하기 어려운 부분은
댓글로 달아주시면 제가 친절하고 아는 선에서 알려드릴게요^^
댓글과 하트는 저에게 많은 힘이 됩니다 :)
댓글