(HTML/CSS) float 맛보기

---

https://developer.mozilla.org/ko/docs/Web/CSS/float

float - CSS: Cascading Style Sheets | MDN

 

 

MDN 사이트를 참조하여 글을 작성합니다. 

 

 

---

float

 

float은 요소를 띄워 표시하는 기능이다. 

 

<div class="float">하지만 가야한다.</div>
    알바가기싫다...
    알바가기싫다...
    알바가기싫다...
</div>

 

일단 알바가기 싫다에 기본적인 float left를 사용하면

 

알바가기 싫다가 하나의 문장이 된것처럼 보인다.

 

구분하기 쉽게 float에 배경색을 넣어보면

 

.container{
    width: 400px;
    background-color: antiquewhite;
}

.float{
    float: left;
    background-color: aqua;
}

하나의 덩어리로 합쳐진 모습을 볼 수 있다.

 

이런식으로 float가 작동한다는 것을 잠깐 알아봤습니다. float의 다양한 속성은 조금 이따가 하고 한가지 예제를 더 보면

 

<div class="container">
      <div class="float">알바가기싫다...</div>
</div>

여기에 container에만 배경색을 주고

 

"알바가기싫다.." 에도 아무런 속성을 주지 않았다

 

부모의 너비를 지정한 만큼 (부모의 크기만큼) 배경색이 입혀졌다

 

그럼 여기에 바로 "알바가기싫다..."에 float:left; 속성을 주면

 

.container{
    width: 400px;
    background-color: antiquewhite;
}

.float{
    float: left;
}

 

배경색을 지정해 줬는데도 보이지 않는 모습을 볼 수 있다. 

 

이유는 부모 요소에 있는 것은 float 자식요소 하나 밖에 없어서 부모가 높이를 잃어버렸다. 

 

그러니까 부모요소인 container 에는 너비가 400px 이고 배경색이 지정되었지만 그걸 나타내는 요소는 하나도 없기때문에 색이 보이지 않는 것이다.

 

자식요소인 "알바가기싫다..."는 float 으로 떴으니

 

이런식으로 float를 사용하다보면 부모의 높이를 잃어버려 배치가 내맘처럼 안되는 경우가 생긴다.

 

그럴때는 부모요소인 container 에게  display: flow-root; 를 주면 된다.

 

.container{
    width: 400px;
    background-color: antiquewhite;
    display: flow-root;
}

.float{
    float: left;
}

그럼 똑같이 자식요소가 float으로 떠있는데도 부모요소의 높이가 그대로 나타나는 것을 볼 수 있다. 

 

하지만 일부 브라우저에서 flow-root 를 사용하지 못하는 경우가 있다. 그럴때는

 

display: flow-root;
overflow: hidden;

 

등을 사용하여 해결할 수 있다. 

 

---

float 속성들 

 

.float {
  border: red solid 1px;
}

float: left;

float: left;

float: right;

float: right;

float: none;

float: none; (기본값) 떠있지 않은 상

float: inline-start;

float: inline-start;

float: inline-end;

float: inline-end;