前端值得一探究竟特辑 --- BFC(块级格式化上下文)、BFC清除浮动、BFC自适应两栏布局

最新推荐文章于 2023-10-22 20:47:47 发布

那等雨停吧

最新推荐文章于 2023-10-22 20:47:47 发布

阅读量173

点赞数

分类专栏： CSS Front-End 前端值得一探究竟特辑文章标签：块级格式化上下文自适应两栏布局清除浮动 BFC

本文链接：https://blog.csdn.net/WRian_Ban/article/details/100130734

版权

Front-End 同时被 3 个专栏收录

34 篇文章 0 订阅

订阅专栏

CSS

17 篇文章 0 订阅

订阅专栏

前端值得一探究竟特辑

13 篇文章 1 订阅

订阅专栏

参考文章

以前对于BFC的理解相当肤浅和片面，这次决定把BFC好好理解清楚。

1、块级格式化上下文(Block formatting context)

并不是块级元素就是BFC呀，哎哟我滴小撒瓜···哭了···太难了···

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

什么是Box?
Box 是 CSS 布局的对象和基本单位吗，也就是咱们的标签其实就是个盒子，CSS 就以此为基础进行渲染、布局。

最常见的Box有：
- block-level box:display 属性为 block, list-item, table 的元素。
- inline-level box:display 属性为 inline, inline-block, inline-table 的元素。
元素的类型和 display 属性，决定了这个 Box 的类型。
不同类型的 Box，会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。
而BFC（即block-level box）是特殊的Box，是一个独立的渲染区域，它规定了内部如何布局，并且与这个区域外部毫不相干。

2、生成BFC

根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible( hidden,scroll,auto)
我们在显示生成BFC的时候，设置display:inline-block，overflow:hidden；都是比较常见的做法。

3、BFC布局规则

内部的Box会在垂直方向，一个接一个地放置。✔
这个很好理解的，只要内部元素没有脱离文档流，都应该是从上到下依次放置的。

<head>
  <style>
      body {
          width: 300px;
          position: relative;
      }
   .container{
          border: 5px solid skyblue;
          overflow: auto;  // 内部的Box会在垂直方向，一个接一个地放置
       }
      .aside {
          width: 100px;
          height: 150px;
          float: left;
          border: 5px solid yellow;
      }

      .main {
          height: 100px;
          border: 5px solid pink;
          overflow: auto;
      }
  </style>
</head>
<body>
<div class="container">
    <div class="aside"></div>
    <div class="main"></div>
</div>
</body>

在这里插入图片描述

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的垂直margin会发生重叠。✔

.aside {
  width: 100px;
  height: 150px;
  border: 5px solid yellow;
  margin-bottom:20px;
}

.content{
  height: 100px;
  border: 5px solid pink;
  margin-top:40px;
}

<div class="container">
    <div class="aside">aside</div>
    <div class="content">content</div>
</div>

按照代码：aside与content之间，距离应该是60px(margin-bottom:20px+margin-top:40px)，但现在距离只要40px。aside与content的垂直方向margin重叠了。
在这里插入图片描述

解决方法一：可以将content包裹在新的div里，将content与aside隔离开。

.wrap{
 	overflow: hidden;
 }
<div class="container">
   <div class="aside">aside</div>
   <div class="wrap"> // 隔离BFC子元素
   	<div class="content">content</div>
   </div>
</div>

在这里插入图片描述
解决方法二：简单一点，直接设置aside为BFC。

    .aside {
      width: 100px;
      height: 150px;
      border: 5px solid yellow;
      margin-bottom:20px;
      display:inline-block;  //触发BFC
    }

在这里插入图片描述

每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。✔

<style>
    body{
    	padding: 150px 50px;
    }
    .container{
      border: 5px solid skyblue;
      overflow: auto;  // 内部的Box会在垂直方向，一个接一个地放置
      width: 200px;
    }
    .aside {
      float: left;
      width: 100px;
      height: 150px;
      border: 5px solid yellow;
    }

    .content {
      height: 100px;
      border: 5px solid pink;
    }
</style>
<div class="container">
    <div class="aside">	aside</div>
    <div class="content">content</div>
</div>

在这里插入图片描述

BFC的区域不会与float box重叠。最常见的应用就是自适应两栏布局。
content会根据父元素的宽度，和aside的宽度，自动变窄。

<style>
    body{
    	padding: 150px 50px;
    }
    .container{
      border: 5px solid skyblue;
      width: 300px;
      overflow: hidden;

    }
    .aside {
      float: left;
      width: 100px;
      height: 150px;
      border: 5px solid yellow;
    }
    .content {
      height: 100px;
      border: 5px solid pink;
      overflow: hidden; // BFC的区域不会与float box重叠
    }
</style>
<div class="container">
    <div class="aside">	aside</div>
    <div class="content">content</div>
</div>

在这里插入图片描述

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

因为BFC内部的元素和外部的元素绝对不会互相影响，因此，当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。

计算BFC的高度时，浮动元素也参与计算。✔ 可应用于清除浮动。其他清除浮动方法见链接彩蛋
container不是BFC时，子元素浮动，container会崩塌。

<style>
  body{
    padding: 150px 50px;
  }
  .container{ // 非BFC
    border: 5px solid skyblue;
    width: 300px;
  }
  .aside {
    width: 100px;
    height: 150px;
    float: left; // 浮动
    border: 5px solid yellow;
  }
  .content {
    width: 100px;
    height: 150px;
    float: right; // 浮动
    border: 5px solid pink;
  }
</style>
</head>
<body>
<div class="container">
  <div class="aside">aside</div>
  <div class="content">content</div>
</div>
</body>

在这里插入图片描述
将container变为BFC

  .container{
    border: 5px solid skyblue;
    width: 300px;
	overflow: hidden; // 计算BFC的高度时，浮动元素也参与计算
  }

在这里插入图片描述

那等雨停吧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端值得一探究竟特辑 --- BFC(块级格式化上下文)、BFC清除浮动、BFC自适应两栏布局

参考文章以前对于BFC的理解相当肤浅和片面，这次决定把BFC好好理解清楚。1、块级格式化上下文(Block formatting context)并不是块级元素就是BFC呀，哎哟我滴小撒瓜···哭了···太难了···BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Bloc...
复制链接

扫一扫

专栏目录