CSS float은 무슨 뜻인가요? CSS가 수레를 지워야 하는 이유는 무엇입니까?

CSS에서는 float 속성을 통해 요소의 부동을 구현합니다. (float 속성에 대한 자세한 내용은 css 매뉴얼을 참고하세요.)

위의 의미는 왔다 갔다 하는 것 같으니, 아래에서는 일반인의 용어로 설명하겠습니다.

CSS의 일부 요소는 블록 수준 요소이며 자동으로 새 줄을 활성화한다는 점을 알아야 합니다(블록 수준 요소 참조 문서: CSS 블록 수준 요소의 정의는 무엇입니까? CSS 블록은 무엇입니까?) 레벨 요소? ), 또 다른 유형의 인라인 요소는 이전 콘텐츠와 함께 "한 줄"로 표시됩니다(인라인 요소 참조 문서: CSS 인라인 요소란 무엇입니까? CSS 블록 수준 간의 차이점). 요소와 인라인 요소)가 있지만 때로는 CSS 부동을 사용해야 하는 이 레이아웃 방법을 변경해야 합니다.

CSS 부동 소수점을 사용하면 특정 요소가 행 옆으로 이동하고 다른 콘텐츠가 아래쪽으로 흐를 수 있습니다. 오른쪽 부동 요소는 컨테이너의 오른쪽으로 밀리고 콘텐츠는 왼쪽으로 흘러갑니다. 부동 요소가 있는 요소는 왼쪽으로 밀리고 콘텐츠는 오른쪽으로 아래로 흐릅니다.

CSS float의 의미를 읽은 후 CSS에서 float를 클리어해야 하는 이유를 살펴보겠습니다.

2. CSS에서 부동 소수점을 지워야 하는 이유는 무엇입니까?

위에서 css float이 무엇을 의미하는지 설명한 후에 우리는 어떤 경우에는 CSS float가 반드시 존재해야 한다는 것을 알고 있는데 왜 float를 지워야 할까요?

우리는 알아야 합니다: 떠 있는 상자는 다른 떠 있는 상자나 바깥쪽 가장자리에 있는 상자를 만날 때까지 왼쪽과 오른쪽으로 이동할 수 있습니다. 플로팅 상자는 문서 흐름의 일반적인 흐름에 속하지 않습니다. 요소가 플로팅되면 블록 수준 요소의 레이아웃에 영향을 주지 않고 인라인 요소의 레이아웃에만 영향을 미칩니다. 이때 문서 흐름의 정상적인 흐름은 플로팅 박스에 동일한 레이아웃 모드가 없음을 보여줍니다. 컨테이너 상자의 높이가 부동 상자보다 작으면 "높이 붕괴"가 발생합니다. 이때 플로트를 클리어하는 것이 필요합니다.

간단히 말하면:

예: float가 지워지지 않으면 div가 겹치는 문제가 발생합니다. 상단에 헤더 블록, 중앙에 두 개의 콘텐츠 블록 열, 하단에 바닥글 블록이 있는 웹 페이지를 만듭니다. 중간 콘텐츠 블록에 왼쪽 부동을 설정했는데 두 블록의 높이가 일치하지 않습니다. 한 블록이 더 높으면 바닥글에서 부동을 지워야 하며 바닥글 블록이 겹칩니다. 그림:

관련 추천:

CSS 플로팅은 무엇을 의미하나요? CSS 플로팅 원리와 CSS 클리어 플로트 방법(코드 포함)

플로팅 CSS 클리어 원리