[CSS] float 속성 | left | right | none | 해제

오늘은 display 속성 마지막에서 예고했던 float 속성에 대해 정리해볼게요🔍

웹 페이지에서 배치 작업을 할 때는 CSS 포지셔닝(positioning)이 중요한데

블록요소를 가로로 배치하는 방법에는
- 가로 배치하고 싶은 요소에게 display: inline-block;
- 가로 배치하고 싶은 요소에게 float라는 속성 부여
- 가로 배치하고 싶은 요소를 감싸는 부모요소에게 display: flex;
가 있습니다.

이 중에서 float 속성에 대해 알아볼게요!!🔥🔥

 

float는 원래 이미지를 글자와 조화롭게 배치하기 위한 속성이지만 
요즘에는 레이아웃을 작성할 때 자주 사용됩니다.
왼쪽이나 오른쪽에 배치할 때 사용하며 배치를 하지 않을 경우는 'none'으로 표현합니다.

 

 

📌 float: left;
- 왼쪽 정렬
- 원래 작성된 순서 유지(A-B-C-D)

 

 

📌 float: right;
- 오른쪽 정렬
- 원래 작성된 순서와 반대로(D-C-B-A)

 

 

📌 float: none;
- 정렬 X

 

 

 

 

그런데 float를 사용했을 때

- 부모요소에 height 값을 지정하지 않은 경우 부모요소의 height가 안잡힘(height 값이 0px이 됨)

- float가 마지막으로 적용된 태그 밑으로 그 이후에 등장하는 태그가 깔리게 됨

과 같은 오류가 발생하는 경우가 있어요.

 

아래의 파일에서 float 오류를 확인해보세요!

index.html

0.00MB

그래서 float는 해제가 필수예요!!⭐️⭐️

 

해제방법은 4가지가 있습니다. 상단의 float 오류 파일에 해제방법을 적용해보시면서 확인해보세요!

1) 부모요소에 height 값 부여

2) 부모요소에 overflow: hidden; 부여
그러나 overflow는 스크롤, 즉 넘치는 애들을 관리하는 속성

3) 빈 div를 만들어서 clear: both; 부여
그러나 아무 역할도 없는 빈 div를 만드는 것은 웹표준-웹접근성을 해침

4) HTML에서 부모요소에 clearfix라는 class 부여하고
CSS에서 .clearfix::after {content: ""; display: block; clear: both;} 작성⭐️⭐️⭐️⭐️⭐️

 

4번이 가장 효율적이고 보편적으로 쓰이는 방법이라 암기해서 사용하는 것을 추천드려요!!🔥

 

 

 

 

마지막으로 float를 통해 요소의 display가 변화할 수도 있는데
inline 요소가 float 속성을 가지게 되면 block 요소로 바뀌게 되며 지정한 너비와 높이 값대로 나타납니다.

 

<span style="width:100px;height:100px;border:2px solid black">inline</span>
<span style="float:left;width:100px;height:100px;border:2px solid black">block</span>

 

하지만 float 속성을 적용하더라도 flex, grid 등의 display 값은 block으로 바뀌지 않아요!!🙅🏻

 

 

---

티스토리가 드디어 복구되어서ㅜㅜ 늦게 돌아오게 되었는데요..!

오늘은 float 속성에 대해 알아봤는데

레이아웃을 작성할 때 float 속성을 정말 많이 사용해서

사용법과 해제하는 방법까지 알아두면 레이아웃을 잡기 편할 거예요!!ㅎㅎ
다음 글에는 position 속성에 대해 정리해볼게요!

 

안뇽~~👋🏻👋🏻