float , float 부작용 해제하는 방법

css에서 float란 '뜨다'라는 단어를 뜻하며, 사용 용도는 이미지를 어떻게 띄어서 텍스트와 함께 배치할 것인지 정하는 속성입니다.

inherit: 부모 요소에서 상속
left: 왼쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름.
right: 오른쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐름. 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라짐. none 이 아니라면 display 속성은 무시된다.
none - 요소를 부유시키지 않음

left와 right를 통해 부유속성을 지정시 display는 무시됩니다. (none은 제외)
또한 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라집니다.

참고자료)

CSS float 속성 - ofcourse

개요 float 라는 단어는 원래 ‘뜨다’ 라는 의미이며, 원래 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성입니다. inherit: 부모 요소에서 상속 left: 왼쪽에 부유�

ofcourse.kr

다만 레이아웃을 설정하는 float 속성에서 (구버전 브라우저 지원) 페이지의 원래의 흐름이 달라지게되고

이를 해제하는 방법이 있는데요

clear 속성을 이용합니다

* float 해제하는 방법

float을 해제하는 방법은 총 6가지 방법이 있습니다.

1. float된 요소의 부모태그에 강제로 높이 값을 지정해줍니다. (단점 : 반응형시 자동 높이 값 설정 불가)

2. float된 요소의 부모태그에 overflow:hidden을 적용해줍니다. (단점 : 해당 요소 안의 컨텐츠를 박스 외부로 표현해줄 수 없음)

3. float된 요소의 부모태그에 overflow:auto를 적용해줍니다. (단점 : 특정 브라우저에서 스크롤 바가 표시 됨)

4. float된 요소의 부모태그에 float을 또 설정해줍니다. (단점 : 가운데 배치 불가능)

5. float된 요소의 다음에 나오는 태그에 clear:both를 지정합니다.(단점 : clear:both가 적용된 요소에는 margin-top 적용 불가)

6. float된 요소의 부모태그에 가상요소를 만들고 해당 요소에 clear:both를 지정해줍니다. **권장

float된 요소의 부모태그::after{

   content:'';

   display:block;

   clear:both;

}

참고

[CSS] clear 속성, float 속성, float 해제하는 방법(가상요소)

clear 속성은 보통 float 속성을 해제할 때 많이 사용합니다. float은 블록요소를 강제로 좌우배치할 때 쓰이는데요, 하지만 float을 사용하게 되면 float이 설정된 요소는 브라우저가 높이 값을 인지하

neul-carpediem.tistory.com

float속성을 통해 레이아웃을 구성하게될때 생기는 현상은 float의 부모에 어떠한 작업을 통해 해결한다고 이해하면 될 것 같습니다.

6번째 방법이 가장 선호되는 이유는 문서의 view와 역할을 구분하고자 입니다.

허범성