怎么创建BFC以及BFC的应用场景

 

BFC（block-formatting-context）就是块级格式化上下文。它的作用是创建一个独立的渲染区域，使容器内的元素和容器外的元素的样式不会相互影响。

 

怎么创建一个BFC容器

1.position的值为absolute或者fixed;

2.float的值不为空；

3.overflow的值不为visible；

4.display的值为inline-block、flex、table-cell、table-caption或者inline-flex；

5.根元素<html>

 

BFC的应用场景

1.解决容器内子元素浮动、绝对定位等原因造成的高度塌陷的问题；

    <!-- html -->
    <div class="parent">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>
	<div class="parent1"></div>
    <!-- css -->
    <style rel="stylesheet">
      .parent{
        background: #eee;
      }
	  .parent1{
        background: #a33;
        height: 500px;
      }
      .child{
        width: 200px;
        height: 200px;
        background: #333;
        margin: 0 15px;
        float: left;
      }
    </style>

因为子节点浮动，造成父节点高度塌陷。后果就是因为parent高度为0，后面的兄弟元素parent1占了原本属于parent的位置，造成布局混乱。
image

用BFC的方法解决也很简单，让parent变成BFC就可以了

    .parent{
      background: background: #33a;;
      overflow: hidden;
      /* display: inline-block; */
      /* 如果是用float和绝对定位要注意：虽然这样做parent的高度不会塌陷，但是它本身脱离了文档流，parent1会和它重叠 */
      /* float: left; */
      /*position: absolute; */
    }

image

2.解决上下边框塌陷问题；

你在排版的时候有没有遇到过这种情况：① 父元素没有设置上边框却向下偏移了；② 上下相邻的元素都有上下边框时，两个元素中间的距离并不等于上面元素的下边框加下面元素的上边框。

    <!-- html -->
    <div class="parent">
      <div class="child1"></div>
      <div class="child2"></div>
      <div class="child3"></div>
    </div>
    <!-- css -->
    <style rel="stylesheet">
      *{
        margin: 0;
        padding: 0;
      }
      .parent{
        background: #33a;
      }
      .parent>div{
        width: 200px;
        height: 200px;
      }
      .child1{
        background: #333;
        margin: 10px 0;
      }
      .child2{
        background: #333;
        margin: 20px 0;
      }
      .child3{
        background: #333;
        margin: 30px 0;
      }
    </style>

image

这种和我们想的不一样的情况不是css的bug，我们可以理解成这是一种规范。这种情况我们也可以用BFC来解决。父元素没有设置上边框却向下偏移了的情况可以把父元素设置为BFC来解决；上下相邻的元素都有上下边框时，两个元素中间的距离并不等于上面元素的下边框加下面元素的上边框的情况是因为这两个元素是在同一个BFC里面，把它们放在不同的BFC里就可以解决了

    <!-- html -->
    <div class="parent">
      <!-- <div class="container"> -->
        <div class="child1"></div>
      <!-- </div> -->
      <div class="container">
        <div class="child2"></div>
      </div>
      <!-- <div class="container"> -->
        <div class="child3"></div>
      <!-- </div> -->
    </div>
    <!-- css -->
    <style rel="stylesheet">
      *{
        margin: 0;
        padding: 0;
      }
      .parent{
        background: #33a;
        overflow: hidden;
      }
      .container{
        overflow: hidden;
      }
      .child1{
        width: 200px;
        height: 200px;
        background: #333;
        margin: 10px 0;
      }
      .child2{
        width: 200px;
        height: 200px;
        background: #333;
        margin: 20px 0;
      }
      .child3{
        width: 200px;
        height: 200px;
        background: #333;
        margin: 30px 0;
      }
    </style>

在我把代码改成这样后，页面变成了下面这个样子。
image

posted @ 2022-02-27 23:41  便当  阅读(387)  评论(0)    收藏  举报