3.2 float | Notion

1.의의

엘리먼트를 뛰워서 오른 쪽 또는 왼쪽으로 배치하는 프로퍼티이다.
웹페이지에서 텍스트와 함께 이미지 배치를 위해 고안되었지만, 수평 정렬을 위해 기존에 사용되었다.
float는 본래 수평 정렬을 통한 레이아웃을 만들기 위해 고안된 것이 아니며 ,이미지와 문단 배치를 위한 프로퍼티로 만들어 졌다.
float 는 복잡하고 , 기본 동작과 달라보이는 다양한 케이스가 나타날 수 있고, 이를 해결하는 공식적인 방법은 없으며 , 디자이너나 퍼블리셔가 이용하는 비공식적인 방법은 많이 있다.
수평 정렬을 위해 float, flexbox, css grid 를 사용할 수 있다.
- 전통적인 프로젝트에서는 float을 사용해 왔고 , 최근에는 flexbox를 많이 사용한다.
- CSS Grid를 이용하는 방법도 있지만 호환성 이슈때문에 잘 사용하지 않는다.
현재 대부분의 프로젝트는 flexbox가 주로 되지만, float도 기존 프로젝트에 사용되기 때문에 이해해야 한다.

float 프로퍼티 값

float 를 적용하는 프로퍼티이다.

none:요소를 떠 있지 않게 함(디폴트)
right :요소를 오른쪽에 띄운다.

left :요소를 왼쪽으로 띄운다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
	  <style>
			div {
				width: 100px;
				height: 100px;
				border: 2px solid #f2b441;
				border-radius: 10px;
			}
			.box1 {
				background: #f2d541;
				float: left;
			}
			.box2 {
				background: #5fb6d9;
				float: left;
			}
			.box3 {
				background: #d90404;
				float: right;
			}
			.box4 {
				background: #3b9cd9;
				float: right;
			}
	  </style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
		<div class="box4"></div>
	</body>
</html>

clear 프로퍼티 값

float 를 해제하는 프로퍼티이다.

none:float를사용 할 수 있다.(디폴트)
right :왼쪽 float을 사용해제 한다.

left :오른쪽 float을 사용해제 한다.

<!doctype html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>박스모델</title>
	<style>
		div {
			padding:20px;
			margin:10px;
		}
		#box1{
			background:#ffd800;
			float:left;  /* 왼쪽으로 플로팅 */ 
		}
		#box2 {
			background: #0094ff;
			float:left;  /* 왼쪽으로 플로팅 */
		}
		#box3 {
			background: #00ff21;
		}
		#box4 {
			background:#a874ff;
			clear:left;  /* 플로팅 해제 */
		}
	</style>
</head>
<body>
	<div id="box1">박스1</div>
	<div id="box2">박스2</div>
	<div id="box3">박스3</div>
	<div id="box4">박스4</div>
</body>
</html>

float 의 여러 가지 속성과 복잡한 문제

float으로 레이아웃을 구현할 때 고려해야 할 여러 가지 문제들이 있다.
이러한 여러가지 특징은 화면을 구현할 때 복잡한 문제를 발생시킨다.
- float 프로퍼티로 설정한 요소는 기본적으로 display 특성을 block 특성으로 변경한다.
  - display 가 flex등으로 설정되어 있는 경우 제외된다.
- 하지만, block 특성을 가진 요소는 width 를 설정하지 않을 경우, width 가 100% 가 된다.
- float 프로퍼티로 설정한 요소는 요소의 크기만큼 width 가 설정되어, display 프로퍼티를 마치 inline-block 으로 선언해 준 것과 동일하게 동작한다.
- float 설정시 문서의 일반적인 흐름에 포함되지는 않지만(부유 또는 부유 객체), float 가 적용된 요소에 content 가 있을 경우 (또는 해당 요소의 너비와 높이가 지정되어 있을 경우), 해당 content 의 너비와 높이(또는 해당 요소의 너비와 높이)는 다음 요소의 content 의 위치에 영향을 준다.
참고)clearfix 가 있는 자식 요소들을 모두 float 이 적용되어야 함