CSS의 Float과 Clear 속성에 대한 이해
1. Float 속성
float 속성은 원래 뉴스 기사나 잡지 등에서 흔히 볼 수 있는 형태인 글과 사진이 함께 어우러지며 화면에 나타날 수 있도록 하기 위해 고안된 CSS 속성 중에 하나입니다.
요소에 float 속성을 지정하면, 해당 요소가 HTML 문서의 기본적인 흐름에서 벗어나 3차원 공간 위로 붕 뜨듯이 배치가 되는 것이 특징입니다. 물론 이로 인해 해당 요소가 가지는 block의 성격을 무시하게 되겠죠.
다음 짧은 유튜브 영상을 보면 쉽게 이에 대한 개념을 잡을 수 있을 것 같습니다.
https://www.youtube.com/watch?v=xara4Z1b18I
position: absolute 속성과 속성값이 지정된 요소와의 차이점은, position: absolute 하게 되면 렌더링 흐름에서 아예 제외되지만, float 속성은 렌더링 흐름에서는 제외되지 않고, 다른 요소에 영향을 미치는 상태로 남아있습니다. 그렇기 때문에 글들이 붕 뜬 삽화 아래에 일부가 가려서 보이지 않는 것이 아니라 삽화를 감싸고 그려지는 것이죠.
float 속성은 값으로 left, right, none, inherit을 가질 수 있습니다. none은 말 그대로 float을 지정하지 않는 기본 값이고, left는 왼쪽으로 붕 뜨도록, right는 오른쪽으로 붕 뜨도록, inherit는 부모 요소의 float 속성값을 따르도록 합니다.
<body>
<img src="simpleSample.jpg" alt="sample image" style="width:300px; float:left;">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
</p>
</body>
float 속성은 이와 같은 삽화 삽입의 예제 뿐만 아니라 레이아웃을 잡을 때에도 많이 사용되었으나, 요즘에는 더 강력한 기능을 간편하게 지원하는 grid나 flex 개념의 대두로, 점점 쓰이지 않는 추세이기는 합니다.
그 이유는 float 속성이 지정된 요소의 크기는 부모 요소의 높이 결정에 영향을 미치지 않는다거나 하는 배치 상의 까다로운 점들이 존재하기 때문인데요. 아래 clear 속성을 통해 이를 어느정도 보완할 수 있습니다.
2. Clear 속성
clear 속성은 이전 요소에 지정된 float 속성을 취소해주는 역할을 합니다.
float 지정된 요소 다음에 오는 요소들은 float 속성이 지정된 요소를 피해 배치되다보니 원하는대로의 배치가 까다로워지는데 이를 방지하기 위해, float 지정된 요소 이후에 오는 요소들이 float에 영향을 받지 않도록 하기 위해 clear 시켜줄 수 있습니다.
float 속성이 가지는 값과 비슷하게 속성값으로는 both, left, right, none, inherit 을 값으로 가집니다. Float 지정된 요소의 방향에 따라 동일하게 속성값을 부여하나 보통은 both를 많이 사용합니다.
또한 float 속성이 지정된 요소의 부모 요소의 높이는 float 속성이 지정된 요소의 높이를 포함하고 있지 않기 때문에 이를 해결하기 위해서 부모 요소의 가상 요소 after를 두고 거기에 clear 를 적용하면서 해결하기도 합니다.
<body>
<img src="simpleSample.jpg" alt="sample image" style="width:300px; float:left;">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
</p>
<p style="clear:both;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate minus, obcaecati quia eaque perspiciatis! Vero cum libero architecto. Odit, et. Totam expedita Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate minus, obcaecati quia eaque perspiciatis! Vero cum libero architecto. Odit, et. Totam expedita Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate minus, obcaecati quia eaque perspiciatis! Vero cum libero architecto. Odit, et. Totam expedita
</p>
</body>
Float / Clear 속성에 대해 동영상으로 보고 싶으시다면 다음 자료를,
https://www.youtube.com/watch?v=qSGXLWKOXHM
Clear 속성과 :after 가상 요소로 높이 문제를 해결하는 것은 다음 자료를 참고해주세요.
https://naradesign.github.io/float-clearing.html
float을 clear하는 방법.
HTML, CSS(flex/grid), UI/UX, Accessibility, 정찬명
naradesign.github.io
'CSS' 카테고리의 다른 글
| CSS Display (0) | 2023.05.09 |
|---|---|
| CSS Box Model (0) | 2023.05.09 |
| CSS Positioning에 대한 이해 (0) | 2023.04.11 |
| CSS 기본 - 잊고 넘어가기 쉬운 것들에 대한 복습 (0) | 2023.04.06 |
