float 프로퍼티
float 프로퍼티는 본래 아래 예제와 같이 이미지와 텍스트가 있을 때, 이미지 주위를 텍스트로 감싸기 위해 만들어진 것이다.
1. 정렬
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: left;
margin-right: 10px;
}
</style>
</head>
<body>
<img src="https://poiemaweb.com/img/doug.jpg">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</body>
</html>
float 프로퍼티를 사용하지 않은 블록 요소들은 수직으로 정렬된다. float:left; 프로퍼티를 사용하면 왼쪽부터 가로 정렬되고, float:right; 프로퍼티를 사용하면 오른쪽부터 가로 정렬된다.
2. width
<!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: red;
}
.d2 {
background: 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가 inline 요소와 같이 content에 맞게 최소화되고 다음 요소인 d2 클래스 요소 위에 떠 있게 된다.
float을 사용하는것이 inline-block와 유사하다고 느꼈다.
그래서 두개의 차이점을 찾아보았다!
🤔 display: inline-block과 float: left의 차이점은?
1. float: left
<!DOCTYPE html>
<html>
<head>
<style>
.box {
color: white;
font-weight: bold;
font-size: 30px;
line-height: 50px;
height: 100px;
}
.d1 {
float: left;
background: red;
}
.d2 {
background: orange;
}
</style>
</head>
<body>
<div class="box d1"> float: left; </div>
<div class="box d1"> float: left; </div>
<div class="d2">iris like requiem honey sunrise melody laptop milky seraphic pure flora girlish marshmallow baby marshmallow twinkle flutter honey laptop droplet melody honey shine florence sunrise flutter blossom grapes droplet ice baby computer computer fabulous lucid computer flutter sunrise you haze haze droplet like eunoia iris twilight grapes droplet illusion cream.
lucy moonlight way blush carnival bijou purity carnival girlish lucid hello blossom iris kitten girlish serendipity girlish girlish seraphic hello haze lucy fascinating blush marshmallow cherish charming charming pure banana eunoia banana ideale blossom carnival bijou world twinkle haze honey masquerade seraphic blossom twilight illusion adolescence masquerade flutter blush computer.</div>
</body>
</html>
2. display: inline-block
<!DOCTYPE html>
<html>
<head>
<style>
.box {
color: white;
font-weight: bold;
font-size: 30px;
line-height: 50px;
height: 100px;
}
.d1 {
display: inline-block;
background: red;
}
.d2 {
background: orange;
}
</style>
</head>
<body>
<div class="box d1"> display: inline-block; </div>
<div class="box d1"> display: inline-block; </div>
<div class="d2">iris like requiem honey sunrise melody laptop milky seraphic pure flora girlish marshmallow baby marshmallow twinkle flutter honey laptop droplet melody honey shine florence sunrise flutter blossom grapes droplet ice baby computer computer fabulous lucid computer flutter sunrise you haze haze droplet like eunoia iris twilight grapes droplet illusion cream.
lucy moonlight way blush carnival bijou purity carnival girlish lucid hello blossom iris kitten girlish serendipity girlish girlish seraphic hello haze lucy fascinating blush marshmallow cherish charming charming pure banana eunoia banana ideale blossom carnival bijou world twinkle haze honey masquerade seraphic blossom twilight illusion adolescence masquerade flutter blush computer.</div>
</body>
</html>
💁 비교 해보자면,
1. float: left
- 각 div가 마진값이 없이 붙어있다.
- float의 속성으로 height 값이 없어져 inline 요소처럼 보여진다.
2. display: inline-block
- 각 div에 기본적으로 마진값이 들어가있다.
- 빈 공간이 있어도 다음 줄로 넘어간다.
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>
일단, 기본적으로 css규칙에서 부모 요소는 자식 요소의 height 만큼의 영역을 가진다.
그런데 3번 div의 배치가 이상한것을 확인할 수 있다.
🤔 왜 그럴까?
- float가 적용되면, normal flow 에서 제외된다.
- 자식 요소가 뜨게 되면서 부모는 자식 요소의 크기를 인식할 수 없게 되고 height는 0 이 된다.
- normal flow 흐름대로 부모 요소의 다음 요소인 3번이 1,2번 아래에 위치하는게 아니라 1번 아래에 위치하게된다.
어떻게 해결해야할까?
1. 부모요소에 높이값을 지정
부모가 자식의 height를 잡을 수 없기 때문에, 자식의 height 만큼 부모의 height에 넣어준다. 하지만 이 방법은 자식 요소에 들어가는 컨텐츠의 길이가 정해져 있지 않고 변한다면 사용할 수 없다.!!
2. overflow: hidden
부모요소에 overflow:hidden을 주는 방법이 있다.
이 방법도 부모 요소를 벗어나는 부분은 가려져 보이지 않는 단점이 있다.
3. clear:both
float 속성이 적용된 요소 다음 요소에 clear: both 를 적용한다. 이런 방법을 float 해제(clear) 라고 한다.
그러나 이 방법에도 문제가 있는데, 다음요소가 바뀐다고 생각을 해보자🥲
다음 요소가 바뀔때마다 코드를 바꿔야한다는 단점이있다.
float 적용된 다음 요소에서 float 해제를 처리하는 것 아니라 float가 적용된 요소와 그 부모 요소 내에서 float가 해제되어야 DOM 간에 의존성이 없어지고, 더 좋은 코드라고 볼 수 있다. 👍
div.null 이라는 요소를 만들고 clear: both 속성을 주면 의존성을 없앨수 있다.
그렇지만, 별도의 DOM 추가하는 방식이기때문에 시멘틱상 불필요한 요소를 만들어 HTML 문서의 가독성을 떨어뜨린다는 단점이 있다.
4. ::after 가상 요소 선택자
마지막 😊
float 대상 부모 요소에 css로 가상요소를 만들어 clear: both 속성을 주는 방법이다.
별도의 dom 생성 없이 css 만 사용하여 float를 준 그룹마다 독립적으로 float 해제를 할 수 있다.
Reference
좋은 자료를 주신분들 감사합니다!! 🙇♀️
