float을 사용하게되면 아래와 같이 작성된 화면이
(float 사용하기 전)
이처럼 전체적인 화면이 바뀌게 됩니다.
block속성을 가지고 있는 요소들은 float이 적용된 속성을 없는 존재로 여겨서
<div class="parent">
<div class="child red">Red</div>
<div class="child yellow">Yellow</div>
<div class="child blue">Blue</div>
</div>부모 태그인 parent의 height값이 자식태그들의 height의 합인 600이 아닌 0이 됩니다.
그리고 inline 태그들은 float을 인지하고
float 속성이 적용된 태그들 옆에 붙는 모습을 보여줍니다.
이처럼 float을 적용했을때 생기는 문제를 해결하는 방법은 다음과 같습니다.
1.overflow:hidden; 을 사용하는 방식입니다.
부모 태그에 overflow:hidden; 속성을 적용하자 float:left 속성이 적용된 자식태그들의 height 값이 사라지지 않고 바뀌는 모습을 확인할 수 있습니다.
2.clearfix를 사용합니다.
(위 예제와 동일)
float이 적용된 태그 아래 새로운 태그를 붙여서 clear:방향; 을 입력하면
위와 같이 화면이 바뀌는 것을 볼 수 있습니다.
clear에는 left, right, both 세가지 방향을 지정할 수 있습니다.
clear는 display 요소가 block인 경우에만 사용 가능합니다.
3.pesudo-element를 사용한다.(css로 만드는 가상요소)
HTML에 존재하지 않는 가상요소를 새로 만들고 위 clear 값을 적용합니다
float이 적용된 위 화면에
부모태그인 .parent에 가상요소 ::after를 만들어 주면
display 요소들이 block인 요소들도 float을 인지하는것을 알수있습니다.
clearfix와 pesudo-element의 차이점
clearfix와 pesudo-element를 사용하면 결과에 큰 차이가 없는것 처럼 보입니다.
(pseudo-element 를 사용)
(clearfix를 사용)
차이점을 보면
clearfix는 float이 적용된 태그를 수정하기 위해 HTML에 새로운 태그를 만들어서 float이 적용된 태그들을 잡아야 하는 번거로움이 있습니다.
float을 사용할시 나타나는 부모 태그들이 자식태그들의 height값을 인식하지 못하는 문제점이 해결되지 않습니다.
하지만 가상요소인 pesudo-element를 사용하게 되면
css에서 수정이 가능하며
부모 태그의 height도 자식 태그의 height을 제대로 인지하는 것을 확인할 수 있습니다.
