CSS相关知识点：6种清除浮动和BFC

最新推荐文章于 2024-08-06 17:51:31 发布

Coisini_甜柚か

最新推荐文章于 2024-08-06 17:51:31 发布

阅读量681

点赞数 1

分类专栏： web前端前端知识库文章标签： css css3 html

本文为Coisini博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_45266979/article/details/121761602

版权

web前端同时被 2 个专栏收录

50 篇文章 0 订阅

订阅专栏

前端知识库

32 篇文章 0 订阅

订阅专栏

本文深入探讨了CSS中的清除浮动技巧，包括给父级设置高度、使用定位、浮动、overflow:hidden、空元素clear和伪元素clear，以及BFC（块级格式化上下文）的概念、触发条件和应用，特别提到了BFC在解决浮动元素导致的高度塌陷问题上的作用。文章还提供了实例代码和效果展示，帮助读者更好地理解和运用这些技术。

摘要由CSDN通过智能技术生成

文章目录

CSS相关知识点：6种清除浮动和BFC

CSS相关知识点：6种清除浮动和BFC

一、6种清除浮动

1.场景

当我们想实现以下面效果时，咱们第一时间肯定会想到浮动float
想要达到效果的图片
通过以下代码：

<template>
  <div>
    CssBFC界面
    <br/><br/>
    <router-link to="/">Home</router-link>
    |
    <router-link to="/about">About</router-link>
    |
    <router-link to="/tabList">TabList</router-link>
    |
    <router-link to="/echarts">Echarts</router-link>
    |
    <router-link to="/cssbfc">CssBFC</router-link>
    <el-divider/>
    <div class="box">
      <div class="left"></div>
      <div class="right"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CssBFC"
}
</script>

<style scoped>
.box {
  border: 1px solid black;
  padding: 5px;
  width: 450px;
  margin: 0 auto;
}

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

.right {
  width: 100px;
  height: 100px;
  background-color: blue;
  float: right;
}
</style>

But，实际达到的效果是下面这样的：
在这里插入图片描述
为什么会出现这种问题呢？？？

2.原因

原因是，两个小方块元素是浮动的，浮动的元素会脱离文档流

什么是文档流？

将窗体自上而下分成一行一行，并在每行中按从左至右依次排放元素，称为文档流，也称为普通流。
这个应该不难理解，HTML中全部元素都是盒模型，盒模型占用一定的空间，依次排放在HTML中，形成了文档流。

什么是脱离文档流？

元素脱离文档流之后，将不再在文档流中占据空间，而是处于浮动状态（可以理解为漂浮在文档流的上方）。
脱离文档流的元素的定位基于正常的文档流，当一个元素脱离文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。

怎么脱离文档流？

1.float属性
例如： float: left;

2.absolute属性
例如： position: absolute;

3.fixed属性
例如： position: fixed;

通俗来讲，一个元素一旦浮动，就会脱离文档流，他的父元素管不了他，布局也会往前推进，才会出现上面的父元素高度坍塌的现象

3.清除浮动

如何清除浮动，让界面更加美观条理呢，有以下6中方法？

(1).给父级设置对应的高度

这是最容易想到的一种方法，当子级元素超过父级的保护范围时，父级能怎么办呢，只能宠呗！扩大自己的领地，给子级元素提供足够的自由活动空间，像极了我们的爸妈，极力给我们提供更好的生活环境，保护我们不被外界伤害。

.box {
  border: 1px solid black;
  padding: 5px;
  width: 450px;
  margin: 0 auto;
  height: 100px
}

效果如下：
在这里插入图片描述

(2).给父级增加定位absolute

position:absolute也会脱离文档流，影响整体布局

.box {
  border: 1px solid black;
  padding: 5px;
  width: 450px;
  /*margin: 0 auto;*/
  position:absolute
}

效果如下：
在这里插入图片描述

(3).将父级也设计成浮动

就相当于子级浮动，父级为了保护子级也加入了浮动大军，但是这样的话，父级的父级有时并不能保证是否可以保护好他的儿子和孙子，所以容器少时，可以使用这种方法，容器比较多时，使用这种方法会比较麻烦，而且更容易影响整体布局。

即更改父级box的样式：

.box {
  border: 1px solid black;
  padding: 5px;
  width: 450px;
  /*margin: 0 auto;*/
  float: left
}

效果如下：
在这里插入图片描述

(4).给父级设置overflow:hidden

这种方式的缺点在于，当有文本时，且文本过长，且包含英文时，会出现文本被隐藏的情况。

.box {
  border: 1px solid black;
  padding: 5px;
  width: 450px;
  margin: 0 auto;
  overflow:hidden
}

效果如下：
在这里插入图片描述
有文字时样式（英文文本被隐藏：

(5).末尾增加空元素进行clear

关于clear：

值	描述
left	在左侧不允许浮动元素
right	在右侧不允许浮动元素
both	在左右两侧均不允许浮动元素
none	默认值，允许浮动元素出现在两侧
inherit	规定应该从父元素继承clear属性的值

新增容器，容器样式为demo，demo设置成clear:both，代表了它左右都不能有浮动元素，这迫使了demo往下移动，进而撑开了父级盒子的高度。

    <div class="box">
      <div class="left"></div>
      <div class="right"></div>
      <div class="demo"></div>
    </div>

.demo{
  clear:both;
}

结果：
在这里插入图片描述

(6).给父级添加伪元素进行clear

这种方法就是用伪元素代替了上面的div标签，大家都知道，伪元素是不会被渲染出来的，所以也很好的弥补了上一种方法的缺点。

.box::after {
  content: '.';
  height: 0;
  display: block;
  clear: both;
}
.box {
  border: 1px solid black;
  padding: 5px;
  width: 450px;
  margin: 0 auto;
  /*overflow: hidden*/
}

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

.right {
  width: 100px;
  height: 100px;
  background-color: blue;
  float: right;
}

效果如下：
在这里插入图片描述

二、BFC定义

1. 官方解释

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level
box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

块格式化上下文（Block Formatting Context，BFC）是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。浏览器对BFC的限制规则是：
1.生成BFC元素的子元素会一个接一个的放置。
2.垂直方向上他们的起点是一个包含块的顶部，两个相邻子元素之间的垂直距离取决于元素的margin特性。在BFC-- 中相邻的块级元素的外边距会折叠(Mastering margin collapsing)。
3.生成BFC元素的子元素中，每一个子元素左外边距与包含块的左边界相接触（对于从右到左的格式化，右外边距接触右边界），即使浮动元素也是如此（尽管子元素的内容区域会由于浮动而压缩），除非这个子元素也创建了一个新的BFC（如它自身也是一个浮动元素）。

2. 触发条件

根元素，即HTML标签
浮动元素：float值为left、right
overflow值不为 visible，为 auto、scroll、hidden
display值为 inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、- - grid、inline-grid
定位元素：position值为 absolute、fixed

解决margin重叠问题
html:

    <div>
      <div class="left"></div>
      <div class="right"></div>
    </div>

css:

.left {
  width: 100px;
  height: 100px;
  background-color: blue;
  /*float: left;*/
}

.right {
  width: 100px;
  height: 100px;
  background-color: blue;
  /*float: right;*/
}

效果图：
在这里插入图片描述
两个方块重合了！
那么如何解决这个问题呢？
因为两个方块处于同一个BEC环境中，我们要做的就是给他们分成两个不同的盒子，只需要触发right的BFC环境就可以。

正确做法：
CSS：

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

.right {
  width: 100px;
  height: 100px;
  background-color: blue;
  float: right;
}