BFC(Block formatting context)

（1）概念：

直译为 块级格式化上下文 ，把BFC理解成一块独立的渲染区域，BFC看成是元素的一种属性， 当元素拥有了BFC属性后，这个元素就可以看做成隔离了的独立容器。容器内的元素不会影响容器外的元素.
    · 我理解为：将BFC看成是一种属性，当拥有该属性的元素就相当于一块独立的区域。

（2）实现BFC属性的方法：

      1. 浮动元素，float 除 none 以外的值
    2. 定位元素，position的值不是static或者relative。
    3. display 为 inline-block 、table-cell、table-caption、table、table-row、table-row-group、
        table-header-group、table-footer-group、inline-table、flow-root、flex或 inline-flex、grid或 inline-grid
    4. overflow 除了 visible 以外的值（hidden，auto，scroll）
    5. 根元素<html> 就是一个 BFC

（3）BFC的作用

    1、避免外边距重叠（防止margin塌陷）

        margin塌陷的意思：同时给两个div设置相同的属性，当设置margin为100px，那么两个div之间的间隙应该是margin-bottom+margin-top=200px的外边距，但是没有设置BFC属性，块的上外边距和下外边距会合并为单个边距，取最大值，如果margin相等，则仅为一个，这就是外边距重叠（margin塌陷）。
        · 没有设置BFC时两个div之间的外边距
        · 通过给其中一个div包裹一个父div，设置BFC属性，来解决margin塌陷的问题
        · 代码： 
<style>
      /* 通过设置overflow:hidden属性，将父容器设置为BFC属性 */
      .container {
        overflow: hidden;
      }
      .cube {
        width: 100px;
        height: 100px;
        background-color: blueviolet;
        margin: 100px;
      }
    </style>
  </head>
  <body>
    <!-- 外边距重叠 -->
    <div class="container">
      <div class="cube"></div>
    </div>
    <div class="cube"></div>
  </body>
        · 运行结果：

    2、用于清除浮动

        · 当给一个父元素设置边框，内部元素会将父元素撑起来，但是如果内部元素设置了 float属性，则该父元素会失去支撑，从而没有高度。
        · 设置了浮动属性的子元素，父元素失去支撑
        · 通过给父元素设置BFC属性，来实现清除浮动
        · 代码： 
<style>
      /* overflow: hidden;设置该属性，将父元素设置了BFC属性，即实现了清除浮动 */
      .parent {
        border: 10px solid darkorange;
        overflow: hidden;
      }
      .child {
        width: 100px;
        height: 100px;
        background-color: rgb(63, 190, 80);
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="child"></div>
    </div>
  </body>
        · 运行结果：

    3、阻止元素被浮动元素覆盖

        · 当前一个兄弟元素设置了浮动属性时，后一个兄弟元素会跑到前一个兄弟元素的位置去，从而后一个兄弟元素被覆盖。
        · 第二个兄弟元素被覆盖的情况
        · 通过给被影响的兄弟元素设置BFC属性，来解决被覆盖的情况。
        · 代码： 
<style>
      .cube1 {
        width: 100px;
        height: 100px;
        background-color: darkorange;
        float: left;
      }
      /* 通过给被影响元素设置overflow: hidden;属性，将其设置BFC属性，实现阻止被浮动元素影响 */
      .cube2 {
        width: 200px;
        height: 200px;
        background-color: darkgrey;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div class="cube1"></div>
    <div class="cube2"></div>
  </body>
        · 运行结果：

（4）拓展：CSS中常见的定位方案

        · 普通流定位
            1.元素按照其在HTML中的先后位置至上而下进行布局
            2.行内元素水平排列，直至当行被占满然后换行，块级元素则会被渲染为完整的一整行
            3.所有元素默认都是普通流定位
        · 浮动
            元素首先按照普通流的位置出现，然后根据浮动的方向尽可能向左或向右偏移
        · 绝对定位
            元素整体会脱离普通流，因此绝对定位的元素不会对兄弟元素造成影响
# html5 # css # html
Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生