BFC(Block Formating Context 块级格式化上下文)

为什么会有BFC?

理论来讲:被包含在父元素里的元素是不会影响到父元素旁边的元素,事实并非如此。

我们想要隔离开,可以触发BFC(Block Formating Context 块级格式化上下文)

BFC是什么?

MDN

块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。

BFC的目的就是:形成一个独立的空间,让空间里的子元素不会影响到外面的布局。

BFC是一种规则,隔离保护的作用。

如何触发BFC?

我们为元素设置一些CSS属性,就能触发这一空间。

下列方式会创建块格式化上下文:

  • float不为none
  • position不为relative和static
  • overflow为auto scroll和hidden
  • display的值为flex、inline-block等等
  • 更多在MDN块格式化上下文

BFC可以解决什么问题?

1.解决浮动元素令父元素高度坍塌

页面中有一个父元素和几个子元素时,这几个子元素都设为浮动时,子元素脱离了文档流,会导致父元素高度坍塌。

这时可以给父元素添加overflow: hidden等,触发BFC,计算高度将浮动子元素算进来。

注意的是:文字会受浮动元素影响,包裹文字的元素还是以正常文档流排列。

<head>
  <style>
    .container {
      
      width: 400px;
      background-color: #ccc;
      overflow: hidden;
    }

    .cube {
      
      float: left;
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }
  style>
head>

<body>
  <div class="container">
    <div class="cube">floatdiv>
    <div class="cube">floatdiv>
    <div class="cube">floatdiv>
    <div class="cube">floatdiv>
    <p>p1p>
  div>
  <p>p2p>
body>

BFC(Block Formating Context 块级格式化上下文)_第1张图片

这里,父元素container触发BFC,形成一个独立的空间,container和p2按文档流排列。p1由于文字会收到影响,导致p1的高度变大,被挤了下来。

如果不给container宽度能放下文字,那么文字会排列到右边
BFC(Block Formating Context 块级格式化上下文)_第2张图片

2.解决外边距垂直方向重合的问题

兄弟元素之间的外边距,会在垂直方向取最大值而不是取和。

我们可以触发BFC来防止它们之间的相互影响,给他们其中一个包裹父元素,设置overflow:hidden;

<div style="overflow: hidden;">
  <div class="container">div>
div>
<div class="container">div>

BFC(Block Formating Context 块级格式化上下文)_第3张图片

你可能感兴趣的:(css,css)