浮动的定义与浮动的清除(BFC)-css教程-PHP中文网

浮动

1. 什么是浮动

2. 浮动的影响

3. 浮动的应用

清除浮动

在子元素上清除

在父元素上清除，即BFC

首页

web前端

css教程

浮动的定义与浮动的清除(BFC)

零下一度

May 10, 2017 am 11:57 AM

浮动

1. 什么是浮动

当元素的 <a href="http://www.php.cn/wiki/919.html" target="_blank">float</a> 属性不为 none 时就产生了浮动。

<p class="float">float</p>

登录后复制

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

登录后复制

2. 浮动的影响

浮动会使元素脱离文档流，具体表现为：

父元素高度塌陷，即不会包含浮动元素。
比如上面的代码就会表现为

父元素高度塌陷

文本环绕。

浮动的定义与浮动的清除(BFC)

文本环绕效果

可以注意到这里.normal元素的宽度覆盖了.float元素，但是.float元素下是没有文本的，也就是说文本被“挤”出来了，这是因为它虽然会脱离文档流，但是不会脱离文本流。这个效果也是float属性的本意。其代码如下：

<p class="float">float</p>

正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素

登录后复制

body {
  background-color: #ccc;
}
.float {
  float: left;
  width: 100px;
  height: 100px;
  background-color: #ddd;
}
.normal {
  background-color: #fff;
}

登录后复制

浮动元素的外边距不会合并。
关于外边距合并的相关内容可以戳这里。
元素一旦浮动便会变成行内块元素，即 <a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>: inline-block。

3. 浮动的应用

上面提到的文本环绕。

写一个三列布局，左右固定宽度，中间自适应。

<body>
  <p class="left float">left</p>
  <p class="right float">right</p>
  <p class="mid">自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素</p>
</body>

登录后复制

body {
  background-color: #ccc;
}
.float {
  float: left;
  width: 100px;
  height: 100px;
  background-color: #ddd;
}
.left {
  float: left;
}
.right {
  float: right;
}
.mid {
  height: 100px;
  background-color: #fff;
  margin: 200px; /*故意加上了上下 margin 值*/
}

登录后复制

这里我故意加上了上了 margin 值，可以看到效果：

浮动的定义与浮动的清除(BFC)

三列布局

body 也随 .mid 的 margin 往下掉了，这点可以用前面介绍的外边距合并来解释。

ps：我第一次自己写这个三列布局的时候，html 是这样写的

<body>
  <p class="left float">left</p>
  <p class="mid">自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素</p>
  <p class="right float">right</p>
</body>

登录后复制

如上把中间自适应的元素写在中间，其实这样比较符合逻辑，但是如果这样写是行不通的，右边的元素会掉下来，因为 .mid 元素是块级元素，会占满整行，.left 不会掉下来是因为它本来就是脱离文文档流的浮动元素。

清除浮动

在子元素上清除

这里我只写不会产生无意义标签的方法。

浮动元素后面若有兄弟元素，则可以在给它的兄弟元素加上clear属性。
如文本环绕那一部分代码，给 .normal 加上 clear:left 或者 clear:both。clear 的具体用法这里不做过多赘述。
给要清除浮动的元素加上伪类或者伪元素。
```
.float::after {
  content: &#39;&#39;;
  display: block;
  visiability: hidden;
  height: 0;
  clear: both;
}
```
登录后复制
关于 ::after 的使用可以看 MDN 的文档。

在父元素上清除，即BFC

BFC（Block Formatting Context），即块级格式上下文，它的官方解释是：

浮动、绝对定位元素（position 为 absolute 或 fixed）、行内块元素 display:inline-block、表格单元格 display:table-cell、表格标题 display:table-caption 以及 overflow 属性值不为 visible 的元素（除了该值被传播到视点 viewport 的情况）将创建一个新的块级格式化上下文。

总结来说它要满足下列条件之一：
1. float 不为 none
2. position 不为 static 或 relative
3. display 为 table-cell、table-caption、inline-block、flex、inline-flex
4. overflow 不为 visible
只要给父元素加上以上任意一个属性满足条件，也就是给父元素加上 BFC 就能清除子元素的浮动。

【相关推荐】

1. 免费css在线视频教程

2. css在线手册

3. php.cn独孤九贱（2）－css视频教程
以上是浮动的定义与浮动的清除(BFC)的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

AI Hentai Generator

免费生成ai无尽的。

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7489

CakePHP 教程

1377

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

如何在 Windows 11 中清除桌面背景最近的图像历史记录 Apr 14, 2023 pm 01:37 PM

Windows 11 改进了系统中的个性化功能，这使用户可以查看之前所做的桌面背景更改的近期历史记录。当您进入windows系统设置应用程序中的个性化部分时，您可以看到各种选项，更改背景壁纸也是其中之一。但是现在可以看到您系统上设置的背景壁纸的最新历史。如果您不喜欢看到此内容并想清除或删除此最近的历史记录，请继续阅读这篇文章，它将帮助您详细了解如何使用注册表编辑器进行操作。如何使用注册表编辑

如何在 Windows 11 中清除保护历史记录：2种方法 Apr 23, 2023 am 08:04 AM

当您的PC存储空间不足时，您可以立即查看许多文件夹以释放空间。其中一个消耗很大一部分的是WindowsDefender保护历史记录，但你可以在Windows11中清除它吗？尽管并非完全必要，但删除保护历史记录实际上有助于清除系统上的一些存储空间。对于某些用户来说，这些文件占用了20-25GB的空间，如果您的计算机存储空间不足，这可能会令人生畏。那么，让我们找出什么是保护历史记录，在Windows11中清除它的所有方式，以及如何将其配置为在设置的时间后自动清除。什么是保护历史？M

iOS 17：如何在待机模式下更改iPhone时钟样式 Sep 10, 2023 pm 09:21 PM

待机是一种锁定屏幕模式，当iPhone插入充电器并以水平（或横向）方向定位时激活。它由三个不同的屏幕组成，其中一个是全屏时间显示。继续阅读以了解如何更改时钟的样式。StandBy的第三个屏幕显示各种主题的时间和日期，您可以垂直滑动。某些主题还会显示其他信息，例如温度或下一个闹钟。如果您按住任何时钟，则可以在不同的主题之间切换，包括数字、模拟、世界、太阳能和浮动。Float以可自定义的颜色以大气泡数字显示时间，Solar具有更多标准字体，具有不同颜色的太阳耀斑设计，而World则通过突出显示世界地

手机中病毒怎么彻底清除推荐手机中病毒处理方法 Feb 29, 2024 am 10:52 AM

手机在感染了某种木马病毒后，通过杀毒软件是无法发现查杀的，这个原理就像电脑感染了某种顽固病毒一样，只能通过格式化C盘重装系统，才能将病毒彻底清理掉，那么接下来我就讲解一下手机感染顽固病毒后，彻底清理病毒的方法。方法一打开手机依次点击“设置”-其他设置“-”还原手机“，将手机恢复至出厂设置即可。注意：恢复出厂设置前要先备份手机里面的重要资料，出厂设置就等同于电脑的”格式化重装系统一样“，恢复完之后手机里面的资料将会清空。方法二（1）首先将手机关机，然后同时按住手机“电源键”+“音量+键或音量-键”

短视频的定义是什么 Dec 23, 2020 pm 02:56 PM

短视频的定义是指在各种新媒体平台上播放的、适合在移动状态和短时休闲状态下观看的、高频推送的视频内容，一般是在互联网新媒体上传播的时长在5分钟以内的视频；内容融合了技能分享、幽默搞怪、时尚潮流、社会热点、街头采访、公益教育、广告创意、商业定制等主题。短视频有着生产流程简单、制作门槛低、参与性强等特点。

什么是Discuz？Discuz的定义和功能介绍 Mar 03, 2024 am 10:33 AM

《探索Discuz：定义、功能及代码示例》随着互联网的迅猛发展，社区论坛已经成为人们获取信息、交流观点的重要平台。在众多的社区论坛系统中，Discuz作为国内较为知名的一种开源论坛软件，备受广大网站开发者和管理员的青睐。那么，什么是Discuz？它又有哪些功能，能为我们的网站提供怎样的帮助呢？本文将对Discuz进行详细介绍，并附上具体的代码示例，帮助读者更

HTML、CSS和jQuery：制作一个带有浮动效果的按钮 Oct 24, 2023 pm 12:09 PM

HTML、CSS和jQuery：制作一个带有浮动效果的按钮，需要具体代码示例引言：如今，网页设计已成为一种艺术形式，通过使用HTML、CSS和JavaScript等技术，我们能够为页面增加各种各样的特效和交互效果。本文将简要介绍如何用HTML、CSS和jQuery制作一个带有浮动效果的按钮，并提供具体的代码示例。一、HTML结构首先，我们需要在HTML文件中

MySQL 复合主键的定义与作用 Mar 15, 2024 pm 05:18 PM

MySQL中的复合主键是指表中由多个字段组合而成的主键，用来唯一标识每条记录。与单一主键不同的是，复合主键由多个字段的值组合在一起形成。在创建表的时候，可以通过指定多个字段为主键来定义复合主键。为了演示复合主键的定义与作用，我们先创建一个名为users的表，其中包含了id、username和email这三个字段，其中id是自增主键，user

See all articles

浮动的定义与浮动的清除(BFC)

浮动

1. 什么是浮动

2. 浮动的影响

3. 浮动的应用

清除浮动

在子元素上清除

在父元素上清除，即BFC

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题