CSS 레이아웃(float)
1. float
float 속성은 웹 요소를 문서 위에 떠 있게 만듭니다.
'떠 있다'라는 의미는 배치된다는 뜻입니다.
(기본형) float: left; float: right; float: none;
| 속성 값 | 설명 |
|---|---|
| left | 해당 요소를 문서의 왼쪽으로 배치합니다. |
| right | 해당 요소를 문서의 오른쪽으로 배치합니다. |
| none | 좌우 어느 쪽으로도 배치 하지 않습니다. |
block속성을 가진 div를 float를 사용하여 같은 라인에 배치 했습니다.
2. clear (float 속성의 해제)
float 속성이 더 이상 유용하지 않다고 알려주는 속성.
(기본형) clear: none; clear: left; clear: right; clear: both;
| 속성 값 | 설명 |
|---|---|
| left | 왼쪽에 float로 배치된 요소 무효화 |
| right | 오른쪽에 float로 배치된 요소 무효화 |
| both | 왼쪽 오른쪽 상관없이 무조건 기본상태로 무효화 |
box1 과 box2 는 float로 왼쪽 배치, box3 float 지정하지 않음(겹처짐),
box4 clear 속성 사용으로 float 속성 무효화(기본상태).
去去去中知 行行行裏覺(거거거중지 행행행리각).
"가고 가고 가는 중에 알게 되고, 행하고 행하고 행하는 가운데 깨닫게 된다"
-노자 왈 -
출처: 이지스퍼블리싱-HTML&CSS 웹 표준의 정석
Author And Source
이 문제에 관하여(CSS 레이아웃(float)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@sbjeong222/CSS-레이아웃float저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
