22. CSS Float기반 레이아웃

1. float

float은 주로 이미지 주변에 텍스트를 감싸기 위해 만들어진 프로퍼티입니다.

 

float 속성은 이전에 레이아웃을 잡는데 정말 많이 사용되던 속성입니다. 

지금은 잘 사용하지 않고 display: flax를 사용을 합니다.

 

float 속성에는 left, right, none 가운데 하나를 값으로 줄 수 있습니다.

그런데 float 속성을 가진 요소는 부모가 높이를 인지할 수 없어서 왼쪽과 같이 부모를 벗어납니다.

그래서 float을 다루기 어렵거나 귀찮은 요소 중 하나라고 생각하는 개발자가 많이 있습니다.

 

float을 해결하려면 clear라는 속성이 필요합니다.

float 요소 옆에 채워지는 요소들에게 적용하는 프로퍼티입니다.

해결방법은 여러개가 있지만 그 중 몇 개만 소개해드려요.

해결방법1.

바깥 div(.wecode-box) 마지막에 아무태그나 넣고 clear 속성을 적용합니다.

이 기법을 사용할 때에는 HTML코드를 더 입력해야 하는 부담이 있습니다.

해결방법2.

주로 많이 사용하는 방법인데 바깥 div(.wecode-box)에 overflow: hidden; 을 주는 것입니다.

해결방법3.

바깥 div(.wecode-box)를 float시킵니다.

그러면 자식의 float 높이를 인지하여 그만큼 높이를 차지하게 됩니다.

하지만 이것도 문제가 있죠, float이 되어버려 block 요소의 성질이 없어지게 됩니다. 이러면 width를 100% 추가하거나 해야합니다.