[CSS] float으로 요소를 정렬해보자⛵

chooing·2022년 4월 13일
0

CSS

목록 보기
7/10

요소가 둥둥 떠다녀요⛵

요소를 띄워서 정렬시키는 속성으로 그림을 따라 흐르는 텍스트 레이아웃을 웹에서 구현하기 위해 탄생한 속성이다. float은 왼쪽과 오른쪽으로 정렬 되는 특성을 가지며 블록 박스 요소를 정렬하는 가장 기본적인 방법으로 사용한다.

그럼 정렬만 하면 끝?

요소에 float: left을 적용하면 왼쪽으로 float:right를 적용하면 오른쪽으로 정렬된다. 하지만 이렇게 끝난다면 정리할 필요없이 행복하고 평화로웠을 것이다.

float은 앞서 말했듯이 요소를 띄워서 정렬시키는 속성 이다. 그렇다보니 float를 적용한 요소는 기본적으로 요소가 위치하게 되는 normal flow를 벗아나게 되는데(position도 이와 동일하다.) 그렇게되면 다음과 같은 일이 일어나게된다.

자식요소가 부모요소를 벗어나 위에 떠있는 상황이 나타난다..! 정렬만 원했지 부모요소를 벗어나길 바란게 아니였는데... 자식요소가 부모요소 위로 띄어져 있는 상태라 부모요소의 높이를 인식하지 못하고 탈출하게 되는 사태가 발생된다.

위의 예시를 입체적으로 본다면 이런 느낌이 된다. 이제 자식이 부모를 알아볼 수 있도록 하는 해결 방법을 찾아 자유롭고 행복하게 float 속성을 사용하고자한다.

✅해결방법

⭐ 부모 요소에 overflow 속성을 추가 ⭐

부모 요소에 overflow 속성을 주면 block formatting contexts를 생성하게 된다. 이는 float 속성이 적용된 자식 요소를 부모 요소가 인식하도록 만들어 문제를 해결해준다.

부모 요소의 높이 값을 직접 지정

부모 요소에 높이값을 줘서 강제로 늘리는 방법이 있습니다.

다만 이 방법은 자식요소의 높이가 변경되거나 자식 요소가 추가되어 부모 요소 높이가 수정되어야 할 때 등 부모 요소의 높이가 수정될 때마다 지정한 부모 요소의 높이값을 수정해야하므로 비효율적인 방법이다.

clear 속성 사용

float 이 사용된 자식 요소의 바로 다음 형제 요소에 clear 속성을 사용한다.
clear는 left, right, both 값을 가지고 있는데 float의 값과 동일하게 적용하면 된다. both의 경우 정렬 방향에 상관 없이 양옆으로 적용되어 주로 사용된다.

⭐ clear-fix 방법 ⭐

clear-fix 방법은 부모 요소에 가상요소 ::after를 넣어 부모 요소가 자식 요소를 알아보게하는 방법으로 부모 요소 가장 마지막에 가상 요소가 블럭 요소가 들어가져 부모 요소가 자식 요소를 인식하게 된다.

가상요소가 매번 마지막에 들어가지기 때문에 자식 요소를 추가 해도 이후 float 현상을 모두 해결해준다.

.clear-fix 클래스를 생성해 이 클래스를 붙이면 가상요소가 붙는 방법으로 다음과 같은 스타일을 css에 추가 하면 된다.

.clear-fix::after {
	content:'';
	display:block;
	clear:both;
}
profile
멋찐 프론트엔드 개발자가 되기 위해 공부 중입니다

0개의 댓글