본문 바로가기
CSS/CSS 기초

[CSS3] float 속성 사용시 부모태그의 높이 맞추는 방법

by 알찬 퍼블리셔 2019. 4. 9.
728x90
반응형

float을 사용하게 되면 말그대로 엘리먼트가 둥둥 뜨게된다.

 

그렇기 때문에 부모는 float을 사용한 엘리먼트를 품고있지 않기 때문에 높이가 맞지않는다.

 

이를 맞추기 위한 방법으로는 다음과 같다. 

 

 

1. 가장 간단한 방법 overflow : hidden

부모 태그에  overflow : hidden 값을 준다. 

 

2. 가상요소 ::after 을 사용하는 방법 (가장 권장하는 방법!!)

부모선택자::after {
dispaly: block;
content: '';
clear: both;
}

 

3. 가장많이 알려진 clear 태그를 사용하는 방법

빈 태그를 만들어 clear: both; height: 0; overflow: hidden; 값을 설정하는 방법이다.

그러나 의미없는 태그가 생성되므로 권장하지 않는 방법이다.

 

 

728x90
반응형

댓글