[HTML/CSS] Float 레이아웃
박스를 제외한 나머지 인라인요소들이 박스 주변을 wrapping하도록 설정
기본 레이아웃으로는 감싸는 배치가 어려웠다.(사진을 양쪽 끝에 배치하는 경우)
이런 걸 해결하기 위해 Float(둥둥 떠있다)이 등장했다.
Float 속성
none: 기본값
left: 요소를 왼쪽으로 띄움
- float: left(right);를 주는 순간 공간을 왼쪽만 차지하게된다. 둥둥떠있는것처럼
right: 요소를 오른쪽으로 띄움
float는 모든 요소에 시킬 수 있다.
Clearing Float
자식요소가 Float이면 부모요소의 높이가 0으로 처리가 된다. 아무것도 안 들어있는걸로 본다.
해결하기위해 부모에게 .clearfix를 해준다.
.clearfix::after {
content: "";
display: block;
clear: both;
}
clearing하여 부모에 clearfix의 높이를 지정해준다.
매번 clearing을 필수적으로 하여 부모요소에게 clear 속성을 부여해주어야한다.
Flexbox, Grid의 등장으로 사용도가 낮아졌다.
그렇지만 아직까지도 활용하고 있는 방법이다.
Author And Source
이 문제에 관하여([HTML/CSS] Float 레이아웃), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@yunhlim/HTMLCSS-Float-레이아웃저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)