$$config title: float 속성 keywords: - float $$ # float 속성 ##
## float을 사용하는 이유 ```html 1. flex를 사용하지 못하는 경우가 많다. 2. flex를 사용해도 되지만 float을 선호하는 경우도 많다. ```
## float 기본값 ```css float: none ```
## float 정렬 ```css /*왼쪽 정렬*/ float: left; /*오른쪽 정렬*/ float: right; /*중앙 정렬*/ margin: 0 auto; ```
## - 수업codepen : [열기]() ```html ``` ```html ``` ```css ``` ## float을 적용 했을때 문제점 - 수업codepen : [열기](https://codepen.io/kimhyeji324/pen/GRXRvdK) ```html float을 적용한 태그에 부모엘리먼트는 float태그를 감싸지 못한다. ``` ```html

``` ```css section { border: 1px solid red; } div { width: 100px; height: 100px; background-color: orange; float: right; } ```
## float을 적용 했을때 문제점 해결방법 ```html [float을 적용 했을때 문제점 해결방법] - float을 적용한 태그에 동생엘리먼트가 float에 영향을 받지 않으면 된다. [영향 받지않는 방법] - float을 적용한 태그에 동생엘리먼트에 clear 속성을 적용하면 영향을 받지않게된다. ```
## clear 속성 ```html [clear 속성 종류] 1. clear: left → float:left 해제 2. clear: right → float:right 해제 3. clear: both → floa 전부해제 ```
## 가상요소 ```html

``` ```css /*section태그에 첫번째 자식으로 작동*/ section::before { } /*section태그에 마지막 자식으로 작동*/ section::after { } ```
## float을 적용 했을때 문제점 해결방법 예시 ```html float을 끊어주는 동생엘리먼트는 display가 반드시 block이여야한다. ``` - 수업codepen : [html에서 float 동생엘리먼트 추가](https://codepen.io/kimhyeji324/pen/gOdOxJa?editors=1100) - 수업codepen : [css에서 부모엘리먼트에::after 추가](https://codepen.io/kimhyeji324/pen/LYJYjKv)
## float을 적용 했을때 끊어주는 엘리먼트가 inline또는 inline-block일때 - 수업codepen : [inline](https://codepen.io/kimhyeji324/pen/ExexwaO) - 수업codepen : [inline-block](https://codepen.io/kimhyeji324/pen/zYJYExm)
## float과 나란히 배치되는 동생엘리먼트 - 수업codepen : [열기](https://codepen.io/kimhyeji324/pen/RwYwLpa?editors=1100)
## 가로중앙정렬이 안되는 float요소 - 수업codepen : [열기](https://codepen.io/kimhyeji324/pen/PodoJzG)
## 가로중앙정렬되는 float요소 동생엘리먼트 - 수업codepen : [열기](https://codepen.io/kimhyeji324/pen/ababLJx?editors=1100)
## 동생엘리먼트에 clear사용 - 수업codepen : [block](https://codepen.io/kimhyeji324/pen/xxaxXLo) - 수업codepen : [inline-block](https://codepen.io/kimhyeji324/pen/OJoJxOm)
## 가상요소없이 문제점 해결? = X - 수업codepen : [열기](https://codepen.io/kimhyeji324/pen/PodoJRm?editors=1100)
## float 사용 마켓컬리 탑바 제작하기

게시글 상세