BFC块级格式化上下文

用户7815471342851
145 阅读3分钟

什么是块级格式化上下文呢

    <div class="wrapper">
      <div class="box"></div>
      <div class="special">
        <h2></h2>
        <p></p>
        <p></p>
      </div>
    </div>
  • 如果wrapper是一个块格式化上下文，它包含box，special,因为这两个元素是wrapper的子元素
  • 如果special也是一个块格式化上下文，那么这个区域包含h2,p,p，因为它们是special的子内容

块级格式化上下文特点

  • 格式化上下文通常会影响布局。通常会为定位和清除浮动创建上下文，而不是更改布局。原因见块级格式化上下文作用
  • 每一个BFC都会包含它的子元素，但是不包含其子元素的子元素
  • 每一个BFC都是一个单独的区域，空间里的子元素不会影响到外部布局
  • 两个BFC之间不会相互影响

如何创建块级格式上下文

  • 元素
  • 脱离正常文本流的元素
  • overflow属性值不为visible、clip
  • display:flow-root

一个新的 display 属性的值，它可以创建无副作用的 BFC。

overflow属性值

值描述
visible默认值。多余内容不会被修剪，溢出，会呈现在元素框之外。
hidden内容会被修剪，并且其余内容是不可见的。
scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit规定应该从父元素继承 overflow 属性的值。

块级格式化上下文的作用

蓝色区域为wrapper，是父元素。浅蓝色是浮动的元素，红色是浮动元素下面的元素。
将box元素，设定为向左浮动，它脱离了正常文档流，造成父元素边距塌陷，没有撑开。兄弟元素，受到浮动元素影响

image.png

       .wrapper {
        background-color: rgb(79, 185, 227);
        padding: 10px;
        color: #fff;
      }
        /* 将box设置为向左浮动*/
       .box {
        float: left;
        margin-right: 15px; 
        margin: 15px;

        width: 150px;
        height: 200px;
        border-radius: 5px;
        background-color: rgb(207, 232, 220);
        padding: 1em;
      }
       .special {
        padding: 10px;
        color: #fff;
        background-color:lightcoral;
      }

包含内部浮动

为父元素添加一个BFC，添加属性display: flow-root;使得父元素能够根据浮动元素进行增长，将浮动元素始终包含在父元素所在的区域内

image.png

    .wrapper {
        background-color: rgb(79, 185, 227);
        padding: 10px;
        color: #fff;
        display: flow-root; 
      }

清除外部浮动

浮动元素下面的同级元素会受到浮动元素影响，如果想要清除浮动带来的影响，只需要将它下面的元素添加一个BFC,添加属性display: flow-root;
因为正常文档流中建立的 BFC 不得与元素本身所在的块格式化上下文中的任何浮动的外边距重叠。

image.png

      .special {
        padding: 10px;
        color: #fff;
        display: flow-root;
        background-color:lightcoral;
      }

解决块元素边距重叠

解决两个相邻块元素之间上下边距重叠，创建新的 BFC 避免两个相邻元素之间的外边距重叠
blue和red-inner之间有20px的边距，将包裹在red-inner外面的块元素red-outer,添加overflow: hidden;设置为bfc

  <div class="blue"></div>
  <div class="red-outer">
      <div class="red-inner">red inner</div>
 </div>

      .blue,
      .red-inner {
        height: 50px;
        margin: 10px 0;
      }

      .blue {
        background: blue;
      }

      .red-outer {
        overflow: hidden;
        background: red;
      }

空白区域为10px,黄色区域也是10px

image.png # 小结 小结：高度塌陷要给父元素添加display: flow-root;，清除浮动要给浮动下面的元素display: flow-root;，外边距重叠高度不够，给其中一个元素创建display: flow-root;

avatar
文章
阅读
粉丝