CSS 클리어 플로트

CSS 팁: Clearfix

Floating은 CSS에서 매우 중요한 레이아웃 기술이며 웹 페이지 레이아웃에 널리 사용됩니다. 그러나 이는 부모 요소의 높이 붕괴와 같은 몇 가지 문제를 일으킬 수도 있습니다. Clearfix 기술은 이 문제를 해결하기 위해 만들어졌습니다. 이 기사에서는 플로트를 제거하는 몇 가지 일반적인 방법을 소개합니다.

1. 떠다니는 문제

먼저 떠다니는 문제를 이해해 봅시다.

HTML:

<div class="parent">
  <div class="left">左侧区域</div>
  <div class="right">右侧区域</div>
</div>

CSS:

.left {
  float: left;
  width: 300px;
  height: 100px;
  background-color: #ccc;
}

.right {
  float: right;
  width: 300px;
  height: 200px;
  background-color: #eee;
}

효과는 아래 사진과 같습니다.

보시다시피 왼쪽과 오른쪽 영역 모두 플로팅 기술이 사용됩니다. 그러나 부모 요소(예: .parent)의 높이가 자식 요소의 높이와 같기를 원한다면 다음과 같은 문제가 발생합니다.

부모 요소의 높이가 크게 감소했습니다. 이는 하위 요소가 플로팅을 사용하므로 문서 흐름에서 벗어나고 상위 요소에 포함되지 않아 높이 계산에 포함되지 않기 때문입니다.

2. 부동소수점을 지우는 여러 가지 방법

이 문제를 해결하려면 부동소수점을 삭제하여 상위 요소가 높이를 다시 계산하도록 해야 합니다. 다음은 부동 소수점을 삭제하는 데 일반적으로 사용되는 방법입니다.

1. 빈 태그를 사용하여 부동 소수점을 삭제합니다.

이는 부동 소수점을 삭제하기 위해 빈 태그의 특성을 사용하는 매우 일반적인 방법입니다.

HTML:

<div class="parent">
  <div class="left">左侧区域</div>
  <div class="right">右侧区域</div>
  <div style="clear: both;"></div>
</div>

CSS :

.left {
  float: left;
  width: 300px;
  height: 100px;
  background-color: #ccc;
}

.right {
  float: right;
  width: 300px;
  height: 200px;
  background-color: #eee;
}

상위 요소 끝에 빈 태그를 추가하고 clear:both를 설정하여 태그가 플로팅에서 지워졌음을 나타냅니다. clear:both，表示该标签清除浮动。

但是这种方法比较麻烦，需要添加一个无意义的标签，不利于代码的维护。

2、使用 ::after 伪元素清除浮动

与第一种方法类似，使用 ::after 伪元素来清除浮动。由于 ::after 是一个块元素，可以在浮动元素后面添加一个块级元素来清除浮动。

HTML：

<div class="parent">
  <div class="left">左侧区域</div>
  <div class="right">右侧区域</div>
</div>

CSS：

.left {
  float: left;
  width: 300px;
  height: 100px;
  background-color: #ccc;
}

.right {
  float: right;
  width: 300px;
  height: 200px;
  background-color: #eee;
}

.parent::after {
  content: "";
  display: block;
  clear: both;
}

在父元素上使用 ::after 伪元素，并设置 content:"";display:block;clear:both;，表示在父元素之后添加一个块级元素，清除浮动。

这种方法只需要在父元素上添加 CSS 样式，不需要添加多余的 HTML 标签，非常方便。

3、使用 BFC 清除浮动

BFC（Block Formatting Context，块级格式化上下文）是 CSS 中的一个概念，它可以让元素在一个独立的渲染区域内进行渲染，可以清除浮动，实现方式如下：

HTML：

<div class="parent">
  <div class="left">左侧区域</div>
  <div class="right">右侧区域</div>
</div>

CSS：

.left {
  float: left;
  width: 300px;
  height: 100px;
  background-color: #ccc;
}

.right {
  float: right;
  width: 300px;
  height: 200px;
  background-color: #eee;
}

.parent {
  overflow: hidden;
}

在父元素上设置 overflow:hidden

그러나 이 방법은 더 번거롭고 의미 없는 태그를 추가해야 하므로 코드 유지 관리에 도움이 되지 않습니다.

2. 부동 소수점을 지우려면 ::after 의사 요소를 사용하세요.

첫 번째 방법과 유사하게 부동 소수점을 지우려면 ::after 유사 요소를 사용하세요. ::after는 블록 요소이므로 부동 요소 뒤에 블록 수준 요소를 추가하여 부동을 지울 수 있습니다.

HTML: 🎜rrreee🎜CSS: 🎜rrreee🎜부모 요소에 ::after 의사 요소를 사용하고 content:"";display:block;clear:both;를 설정하여 이를 나타냅니다. 상위 요소 그런 다음 블록 수준 요소를 추가하고 부동 소수점을 지웁니다. 🎜🎜이 방법은 추가 HTML 태그를 추가하지 않고 상위 요소에 CSS 스타일만 추가하면 되므로 매우 편리합니다. 🎜🎜3. BFC를 사용하여 부동 소수점을 삭제합니다.🎜🎜BFC(블록 형식 지정 컨텍스트, 블록 수준 형식 지정 컨텍스트)는 요소를 독립적인 렌더링 영역에서 렌더링할 수 있도록 하며 구현은 다음과 같습니다. 다음 :🎜🎜HTML:🎜rrreee🎜CSS:🎜rrreee🎜부모 요소에 overflow:hidden을 설정합니다. 이때 부모 요소는 플로팅 요소가 올바르게 포함될 수 있도록 BFC를 형성합니다. 🎜🎜그러나 이 방법에는 부모 요소의 스타일이 변경되므로 몇 가지 제한 사항이 있습니다. 예를 들어 부모 요소는 음수 여백을 설정하거나 Z-색인 속성을 설정할 수 없습니다. 🎜🎜3. 요약🎜🎜이 글에서는 빈 태그를 사용하여 부동 소수점을 지우고, ::after 의사 요소를 사용하여 부동 소수점을 지우고, BFC를 사용하여 부동 소수점을 지우는 등 부동 소수점을 지우는 여러 가지 방법을 소개합니다. 이러한 방법은 모두 실용화된 기술이며 플로팅으로 인해 발생하는 문제를 해결하기 위해 프로젝트 개발에 유연하게 적용할 수 있습니다. 🎜

위 내용은 CSS 클리어 플로트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!