什么是BFC

发布于：2022-12-31 ⋅ 阅读:(436) ⋅ 点赞:(0)
微信交流群：https://732903.hlcode.cn/?id=NK1fWUR

什么是BFC

BFC - Block Formatting Context 块级格式化上下文 BFC的定义，在官方文档到中是这么介绍的：一个BFC区域包含创建该上下文元素的所有子元素，但是不包括创建了新的BFC的子元素的内部元素，BFC是一块块独立的渲染区域，可以将BFC看成是元素的一种属性，拥有了这种属性的元素就会使他的子元素与世隔绝，不会影响到外部其他元素
那具体是啥意思呢?

  <div class="box1" id="bfc1">
      <div class="box2"></div>
      <div class="box3"></div>
      <div class="box4"></div>
      <div class="box5" id="bfc2">
        <div class="box6"></div>
        <div class="box7"></div>
        <div class="box8"></div>
      </div>
  </div>

假设box1和box5是两个BFC区域，那么根据上述原理能理解到的就是，box1这个BFC区域包含了子元素box2，box3，box4，box5。但不包括box678。而box5这块BFC区域则包含了box678这三个子元素。

？？解决了什么问题

既然出现了BFC，一定是为了解决问题来的，不然没有意义，他概括的来说解决四个问题：
1.包含内部浮动元素
2.排除外部浮动
3.解决margin 重叠的问题
4.解决margin 塌陷的问题

？？如何解决

一、 包含内部浮动元素

现象

因为css的默认规则，当父元素没有进行设置高度的时候，他的高度取决于内部元素的高度，当内部元素设置浮动了之后，父元素就没有了高度，这个过程叫做不包含内部浮动元素，这是css的设置规则，因为设计的时候就说的很明白，浮动元素是不占据空间的

  .f-one-div {
    width: 100px;
    height: 100px;
    background-color: #003400;
    float: left;
  }
  • 效果展示
    在这里插入图片描述
    可以看出父元素的高度就消失了，不是我们想要的效果，这时有几种解决方法

1.在父元素加上高度，但是在开发中基本上不使用固定父元素高度这种写法，所以不建议使用
2 使用 清除浮动clear:both 在浮动元素下加一个空的div标签，然后给这个标签设置clear:both来清除浮动对页面的影响。<div style="clear:both"></div>它的优点是简单，方便兼容性好，但是一般情况下不建议使用该方法，因为会造成结构混乱，不利于后期维护，最致命的一点是margin失效。
3.使用overflow:hidden 一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上overflow:hidden; 那么，父亲就能被儿子撑出高了。这是一个偏方，如果布局简单也是可以使用的，但是也会遇到特殊情况

  • 代码入下
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BFC</title>
</head>
<body>
  <div id="app">
    <div class="f-top-div"></div>
      <div class="f-content">
        <div class="f-one-div"></div>
        <div class="f-two-div"></div>
        <div class="f-position-div" v-if="isOpenPosition">展开</div>
      </div>
      <div class="f-three-div" @click="openPoDiv">{{isOpenPosition?'点击关闭':'点击展开' }}</div>
  </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>


<script>
  var app = new Vue({
    el: '#app',
    data() {
      return {
        isOpenPosition: false
      }
    },
    methods: {
      openPoDiv() {
        this.isOpenPosition = !this.isOpenPosition
      }
    },
  })

</script>
<style>
  
  .f-three-div {
    width: 100px;
    height: 100px;
    background-color: red;
    color: #FFFFFF;
    line-height: 100px;
    text-align: center;
    cursor: pointer;
  }

  .f-position-div {
    position: absolute;
    width: 200px;
    height: 200px;
    bottom: 0;
    background: yellow;
    z-index: 10;
  }

  .f-two-div {
    width: 100px;
    height: 100px;
    float: left;
    background-color: orange;
  }

  .f-one-div {
    width: 100px;
    height: 100px;
    float: left;
    background-color: #003400;

  }

  .f-content {
    position: relative;
    background-color: antiquewhite;
    border: 1px solid #f40;
   overflow: hidden;
  }

  .f-top-div {
    width: 100px;
    height: 100px;
    background-color: blue;
  }
</style>
  • 上面代码效果入下

在这里插入图片描述
当点击展开的时候出现一个绝对定位的元素，背景是黄色，黄色底样式代码入下

  • css
.f-position-div {
    position: absolute;
    width: 200px;
    height: 200px;
    bottom: 0;
    background: yellow;
    z-index: 10;
  }

在这里插入图片描述

其实这个时候黄色是高度其实是200px;多余部分被覆盖掉了

在这里插入图片描述

所以类似这种情况，就不能使用overflow:hidden 来解决了

那么重点来了，下面就用到了今天的主角

4.使用 display: flow-root;
当我们给父元素开启BFC模式

  • css
.f-content {
    position: relative;
    background-color: antiquewhite;
    border: 1px solid #f40;
    /* 简单一点也是可以的 */
    /* overflow: hidden;   */
    /*开启BFC */
    display: flow-root;
  }
  • 当我们点击展开的时候效果入下

在这里插入图片描述

这样上面就达到了我们想要的效果

二、排除外部浮动

现象

当父元素内部有两个元素，其中一个设置了浮动，那么旁边的元素进行文字书写的时候，会自动环绕到该子元素，因为css规则定义就是浮动是不占据空间位置的，所以会直接出现类似报纸文章样式的现象

在这里插入图片描述

当我们给文字的div添加BFC属性

  • css
.f-text {
  display: flow-root;
  }

在这里插入图片描述

三、解决margin重叠

现象

margin重叠其实也是css规则里面的一种，当父元素内部两个子元素中间没有任何可以影响高度的属性或者元素，那么这个时候两个元素设置对立面（marginTop-marginBottom 或者是marginRight-marginLeft）的时候，只会有一个较大的属性值生效，这个现象就叫做margin重叠

在这里插入图片描述

可以看到，我们明明设置了距离上面100 和距离下面100 但是最后距离只有100 这个现象就做margin重叠

给其中一个子元素添加BFC进行解决

  • html
<div class="m-content">
      <div class="m-one-div"></div>
      <div class="m-bfc">
        <div class="m-two-div"></div>
      </div>
    </div>
  • css
.m-bfc{
    display: flow-root;
  }

在这里插入图片描述

四、解决margin塌陷

现象

当我们父元素没有进行设置任何border，内容 ，padding等属性的时候，内部的元素设置了margin属性会直接导致父元素在视觉上生效的现象就叫做margin塌陷

代码入下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BFC</title>
</head>
<body>
    <div class="t-content">
      <div class="t-first-div"></div>
    </div>
</body>
</html>
<style>
  .t-first-div {
    width: 100px;
    height: 100px;
    background-color: blue;
    margin-bottom: 100px;
    margin-top: 100px;
  }

  .t-content {
    background-color: black;
    width: 400px;
    height: 400px;
  }
</style>

在这里插入图片描述

我们明明设置的是内部的元素marginTop100px，但是其实内部的相对位置是没有发生改变的

给外部元素添加BFC进行解决

  • css
.t-content {
    background-color: black;
    width: 400px;
    height: 400px;
    display: flow-root;
  }

在这里插入图片描述

以上就是这四种现象的解决方法，简单的可以使用overflow:hidden解决，但是会有隐患，所以还是推荐使用BFC进行解决

本文含有隐藏内容，请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布