Float2
저번시간에 살펴본 float을 사용했을때 망가지는 레이아웃을 정상화하는걸 알아보자.
overflow:hidden이라는 속성 사용하기김버그 말로는 해당 속성을 부모 엘리먼트에 사용하면, float 속성을 가진 자식엘리먼트를 인식하게 된다고 함.
이런 설명이 충분하지 않으면….
overflow - CSS: Cascading Style Sheets | MDN
을 보자.
실습해보자.
저번시간 망가트린 레이아웃에서… 부모 엘리먼트에 overflow : hidden을 주었다.
그랬더니 이제 각자가 다 위치를 자리잡았음..
개인적으로는 왜 이렇게 작동하는지 모르는채 사용하는걸 좋아하지 않아서… 더 선호하는 다른 방법을 알려주겠다.
CSS에는 clear라는 프로퍼티가 있음. 이걸 이용한다.
clear는 오로지 float로 인해 망가진 레이아웃을 고치기 위해 있는 프로퍼티이다.
clear가 부여된 자식요소는… float된 또다른 형제 요소를 인식할 수 있게 된다.