[css] float

 🚀 float : 둥둥떠있다는뜻

 

그림과 글이 자연스럽게 흐르는 텍스트 레이아웃을 웹에서 구현하기 위해 탄생하였다.

 

 

<예시>

 

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, ad, autem quaerat sed impedit cupiditate tenetur recusandae facere, alias ab nihil nisi eligendi eaque ea molestiae dolore accusantium repellat maiores? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae sed similique deleniti commodi incidunt ipsam rerum illum odio saepe aperiam, sit odit hic labore a impedit aliquam? Officiis, accusamus nobis. Ratione mollitia doloremque ipsum doloribus inventore rerum! Iste voluptatum placeat illo fugiat, laudantium consectetur cum vel aperiam. Possimus ducimus ullam porro culpa, maxime consequuntur obcaecati error, id vero nemo magnam. Eius, nulla delectus. Rem corporis, voluptates obcaecati corrupti a tempora dolore quas enim assumenda cumque placeat neque. Odit et laborum corrupti libero quasi officiis nemo? Voluptates, ipsa minus. Labore, voluptas.

 

- float : right로 준 결과 사진이 오른쪽으로 배열되고 , 글이 자연스럽게 흐르는것을 볼 수 있다.

 

 

 

🥸  float를 쓰면 inline요소로 작용하고 , 그 다음요소는 inline-block요소로 바뀐다. 

 

아래 예제를 통해 알 수 있다.

 

See the Pen Untitled by mandelina (@mandelina) on CodePen.

 

분명 block요소인 div 2개에 대해서 1번째요소에게 float 속성을 적용시키면 "해당 text"만큼의 공간만을 차지하고 오른쪽으로 배치되는 것을 알 수 있다 .

 

 

 🥸 자식요소들이 모두 float속성을 갖는다면 자식 요소들의 높이를 반영 하지 못하고 자신(부모)의 높이 만큼 갖는다.

 

아래 예제를 통해 알 수 있다.

 

See the Pen Untitled by mandelina (@mandelina) on CodePen.

 

 

 

뭔가 이상하다. 예상 결과로선 float를 쓰면 inline-block으로 되니 부모div 안에 자식 div 2개가 왼쪽으로 배치 되어야 할 것 같은데 결과는 부모가 자식 들을 인지하지 못하고 있다.

 

---

 

Q . 왜 자식들의 존재를 인식할 수 없나?

- 브라우저가 요소들을 화면에 어떻게 보여줄지 결정하는 방법에서 해답을 얻을수 있다.

  아래에 그림과 같이 총 3가지 방법이 있다.

- 대부분 요소들 (block , inline)은 normal flow에 따라 레이아웃이 결정된다.

(normal flow : 기본적으로 우리가 알고 있는 인라인요소는 필요한 너비만 차지한다던지 , 마진병합 현상 등이 있다.)

- 하지만 float , postion (absolute , fixed) 를 사용한다면 normal flow에서 벗어나게 되어 normal flow (즉 예제에선 부모)가 float , position이 적용된 요소를 인식을 할 수 없게 되어 버린다.

 

---

Q. 그렇다면 이런 (부모가 자식을 인식하지 못하는) 문제점을

   해결하기 위해서는 ?

 

1. 부모에 overflow 속성을 추가하기

- 대부분 실무에서 많이 사용한다고 한다 .

- 하지만 이경우 부모의 hight가 고정되어 있으면 자식이 짤릴수 있으므로 주의해야한다.

 overflow: hidden;

See the Pen Untitled by mandelina (@mandelina) on CodePen.

 

 

 

2. 부모요소에 높이값을 직접 설정하기

- 좋은 방법은 아니다 . 왜냐면 코드가 변경될 때 마다 height값을 바꿔주어야 하기 때문이다.

 

 

 

3. float이 사용된 요소 바로 다음 형제요소에 clear 속성 사용하기 

- float이 사용된 방향으로 사용해주면 된다.

 

See the Pen Untitled by mandelina (@mandelina) on CodePen.

 

4. clear - fix 방법

-  부모요소에 가상으로 마지막 child 요소를 덧붙여 부모요소가 자식요소들을 알아보는 방법이다.

.wrap::after {
	content:'';
	display:block;
	clear:both;
}

이렇게 덧붙이면 된다.

 

 

🌈그밖에

 

- 빔캠프 종찬님께서 예전에 한번 언급해주셨던 내용인 BFC 역시 float요소 사용시 관련이 있기에

  자세히 포스팅 해보아야겠다.

 

- 라인브레이크 ? 띄어쓰기를 하면 마진이 생긴다.

 

- 레이아웃 위치를 잡을때는 position으로 잡게되는경우 수정할때 위험하기때문에 float,grid,flex 등등을 사용하자.

 

- 재현강사님이 추천하신 "유데미"

 

- 메인안에 패딩값을 주자! (쫀득한 ui를 위해)

 

🔥 회고

오늘은 이론보단 코드리뷰 위주의 수업이였다. 역시나 다양한 코드를 분석해보는건 재밌었다.

아직 section과 article 사용은 좀 헷갈리지만... 그래도 레이아웃을 배치할때 position이 아닌

float로 배치하는것에 익숙해진것에 만족한다 .