首页 / CSS / CSS浮动与浮动清除(BFC)简单教程

CSS浮动与浮动清除(BFC)简单教程

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了CSS浮动与浮动清除(BFC)简单教程，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3783字，纯文字阅读大概需要6分钟。

内容图文

浮动

1. 什么是浮动

当元素的 float 属性不为 none 时就产生了浮动。

<p class="float">float</p>
.float {
  float: left;
  width: 100px;
  height: 100px;
  background-color: #ddd;
}

2. 浮动的影响

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

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

      CSS浮动与浮动清除(BFC)简单教程 - 文章图片

      父元素高度塌陷

    • 文本环绕。

      CSS浮动与浮动清除(BFC)简单教程 - 文章图片

      文本环绕效果


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

      <body>
  <p class="float">float</p>
  <p class="normal">正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素</p>
</body>
      body {
  background-color: #ccc;
}
.float {
  float: left;
  width: 100px;
  height: 100px;
  background-color: #ddd;
}
.normal {
  background-color: #fff;
}

  2. 浮动元素的外边距不会合并。
    关于外边距合并的相关内容可以戳这里。

  3. 元素一旦浮动便会变成行内块元素，即 display: 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 值，可以看到效果：

    CSS浮动与浮动清除(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: '';
  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 就能清除子元素的浮动。

以上就是CSS浮动与浮动清除(BFC)简单教程的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的CSS浮动与浮动清除(BFC)简单教程全部内容，希望文章能够帮你解决CSS浮动与浮动清除(BFC)简单教程所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/414029.html

来源：【匿名】