.png)
1. Float의 작동 💡
float 라는 단어는 원래 ‘뜨다’ 라는 의미이며, 원래 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성이다.
- inherit: 부모 요소에서 상속
- left: 왼쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름.
- right: 오른쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐름. 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라짐. none 이 아니라면 display 속성은 무시된다.
- none - 요소를 부유시키지 않음
left와 right를 통해 부유속성을 지정시 display는 무시됩니다. (none은 제외)
또한 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라집니다.
♦️
<div class="container">
<img src="https://images.unsplash.com/photo-1606788168886-286b0336272d?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80" alt=""
class="cook-img">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil assumenda</p>
</div>.container {
width: 700px;
}
.cook-img {
width:50px;
}
♦️♦️
<img src="https://images.unsplash.com/photo-1606788168886-286b0336272d?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80" alt=""
class="cook-img">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates veniam architecto adipisci consectetur inventore vel autem quo mollitia! Minus eveniet omnis laundantium, ullam natus aperiam sequi nam quisquam nisi a!</p>.cook-img {
width:50px;
float: left;
}
♦️♦️♦️
.container {
width: 700px;
}
.cook-img {
width:50px;
float: left;
}
.paragraph {
padding-left: 80px;
}
♦️♦️♦️♦️
.container {
width: 700px;
}
.cook-img {
width:50px;
float: right;
}
.paragraph {
padding-left: 80px;
}
2. Float을 이용한 layout 💡
float 속성은 원래 글과 이미지 태그사이의 배치를 위해 존재한다. 하지만 layout을 짜기 위한 용도로도 사용될 수 있다. 현재는 flex와 grid의 등장으로 인해 점차 사라질 하나의 트릭이지만 이미 float으로 layout을 개발한 서비스가 많을 것이므로 내용을 어느정도는 이해하고 있어야한다.
예제
아래의 예시에서 h1과 nav를 한 줄에 놓기 위해 float 속성을 추가했다. 가로축은 얼추 맞았지만 문제가 생겼다. 두 개의 요소가 떠버렸기 때문에 main-header 태그는 자식 요소가 사라져버렸다. 그러므로 위아래 패딩만큼의 높이만 가지게 되었다. 지금이야 예시를 들기위해 노란색 배경을 추가했지만 만약에 header 태그에 배경색을 유지해야한다면 난감한 상황이 연출된다. h1태그가 header태그의 밖으로 나가버리는 현상이 발생한다.
<header class="main-header">
<h1>📘 The Code Magazine</h1>
<nav>
<a href="blog.html">Blog</a>
<a href="#">Challenges</a>
<a href="#">Flexbox</a>
<a href="#">CSS Grid</a>
</nav>
</header> * {
margin: 0;
padding: 0;
}
.main-header {
width:900px;
padding: 20px;
background-color: yellow;
}
h1 {
float: left;
}
nav {
float: right;
}
해결법 1. clear:both 속성을 가진 div 태그 추가
float 속성을 사용한 태그들 밑에 clear:both 속성을 가진 빈 div 태그를 추가한다. 문제는 해결되었지만 아무 내용도 없는 태그를 추가하는 것이 조금은 찝찝하다.
<header class="main-header">
<h1>📘 The Code Magazine</h1>
<nav>
<a href="blog.html">Blog</a>
<a href="#">Challenges</a>
<a href="#">Flexbox</a>
<a href="#">CSS Grid</a>
</nav>
<div class="clear"></div>
</header> * {
margin: 0;
padding: 0;
}
.main-header {
width:900px;
padding: 20px;
background-color: yellow;
}
h1 {
float: left;
}
nav {
float: right;
}
.clear {
clear: both;
}
해결법 2. pseudo-element 이용
pseudo-element를 사용하여 header 태그의 맨 마지막 자녀 태그를 생성해준다.
<header class="main-header clearfix">
<h1>📘 The Code Magazine</h1>
<nav>
<a href="blog.html">Blog</a>
<a href="#">Challenges</a>
<a href="#">Flexbox</a>
<a href="#">CSS Grid</a>
</nav>
</header> * {
margin: 0;
padding: 0;
}
.main-header {
width:900px;
padding: 20px;
background-color: yellow;
}
h1 {
float: left;
}
nav {
float: right;
}
/* clearfix 클래스를 가진 태그의 제일 하단에 clear:both를
가진 태그를 생성해줘. 근데 그 내용은 비었으면 좋겠어.
그리고 pseudo-element는 기본적으로 inline 이지?
clear 속성은 block level태그에서 써야하니까 block으로 바꿔줘 */
.clearfix::after {
clear: both;
content: '';
display: block;
}