css的清除浮动-前端问答-PHP中文网

css的清除浮动

王林

发布： 2023-05-27 15:47:40

原创

984人浏览过

css技巧之清除浮动（clearfix）

浮动是 CSS 中一项非常重要的布局技术，在网页的排版中广泛应用。但同时也会导致一些问题，比如父元素高度塌陷等。清除浮动（Clearfix）技术就是为了解决这个问题而产生的，本文将介绍清除浮动的几种常用方法。

一、浮动的问题

首先，我们来理解一下浮动的问题。

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）的高度与子元素的高度相等，那么会出现以下的问题：

浮动导致的父元素高度塌陷问题

可以看到，父元素高度明显缩小了。这是因为子元素使用了浮动，所以它们都脱离了文档流，父元素没有包含它们，导致计算高度的时候不把它们计算在内。

二、清除浮动的几种方法

为了解决这个问题，我们需要通过清除浮动来让父元素重新计算高度。下面介绍一些常用的清除浮动方法：

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，表示该标签清除浮动。

智谱清言 - 免费全能的AI助手

查看详情

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

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，这个时候，父元素就形成了一个 BFC，让浮动元素能够正确地包含在内。

但是这种方法也有一些限制，因为它会改变父元素的样式，比如父元素不能设置负 margin，也不能设置 z-index 属性。

三、总结

本文介绍了清除浮动的几种方法，分别是使用空标签清除浮动、使用 ::after 伪元素清除浮动、以及使用 BFC 清除浮动。这些方法都是实践过的技巧，可以灵活应用于项目开发中，解决浮动带来的问题。

以上就是css的清除浮动的详细内容，更多请关注php中文网其它相关文章！