CSS中的BFC

最新推荐文章于 2024-02-05 16:43:26 发布

大眼萌

最新推荐文章于 2024-02-05 16:43:26 发布

阅读量1.6k

点赞数

分类专栏： CSS WEB前端文章标签： BFC 格式化上下文 Block formatting context

本文链接：https://blog.csdn.net/qq_31635733/article/details/81636107

版权

CSS 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

WEB前端

5 篇文章 0 订阅

订阅专栏

第一部分：什么是BFC?

BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

第二部分：BFC的特征

1、BFC内部，盒子由上至下按顺序进行排列，其间隙由盒子的外边距决定，并且，当同一个BFC中的两个盒子同时具有相对方向的外边距时，其外边距还会发生叠加(Margin Collapse)
2、BFC内部，无论是浮动盒子还是普通盒子，其左总是与包含块的左边相接触（从右到左的的格式，否则为与右边框相接触）
3、 BFC 区域不会与float box区域相叠加
4、BFC内外布局不会相互影响
5、计算BFC高度的时候，浮动元素的高度也计算在内

第三部分：什么情况下会创建BFC？

注意:
(1)"display:table" 本身并不产生"block formatting contexts"。但是，它可以产生匿名框，其中包含"display:table-cell" 的框会产生块格式化上下文。总之，对于"display:table" 的元素，产生块格式化上下文的是匿名框而不是"display:table" 。
(2)是这些元素创建了块格式化上下文，它们本身不是块格式化上下。

第四部分：常用的触发BFC的方法

常用的触发BFC的方法：
根据成为BFC的条件，一般有以下4种方法触发BFC：
1、display: table （前后带有换行符，我们一般也不常用）
2、overflow: scroll （可能会出现不想要的滚动条，丑）
3、float: left （万一我们不想让元素浮动呢？）
4、overflow: hidden （比较完美的创建BFC的方案，副作用较小，仿佛遇到了我的心动女生）

第五部分：BFC特征的详解

1、BFC内部，盒子由上至下按顺序进行排列，其间隙由盒子的外边距决定，并且，当同一个BFC中的两个盒子同时具有相对方向的外边距时，其外边距还会发生叠加(Margin Collapse)

2、BFC内部，无论是浮动盒子还是普通盒子，其左总是与包含块的左边相接触（从右到左的的格式，否则为与右边框相接触）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
  div { height: 20px; } 
  .container {
     position: absolute;  /* 创建一个BFC环境*/
     height: auto;
     background-color: #eee;
  }
  .box1 {
     width: 400px;
     background-color: red;
  }
  .box2 {
     width: 300px;
     background-color: green;
     margin:10px 0px;
  }
  .box3 {
     width: 100px;
     background-color: yellow;
     margin:30px 0px;
  }
  .box4 {
     width: 200px;
     height: 30px;
     background-color: purple;
 }
</style>
<body>
  <div class="container">
     <div class="box1"></div>
     <div class="box2"></div>
     <div class="box3"></div>
     <div class="box4"></div>
</div>
</body>
</html>

浏览器渲染效果：

说明：绿色div与红色div之间的距离是20px,不是20+10=30px,div1~div4是从左往右，从上往下开始布局排列。

3、 BFC 区域不会与float box区域相叠加

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
 .container {
     position: absolute;  /* 创建一个BFC环境*/
     width:100%;
     height: auto;
     background-color: #eee;
 }
 .box1 {
     width: 84px;
     height:396px;
     float:left;     
 }
 .box2 { height:auto; }
</style>
<body>
  <div class="container">
  <div class="box1"><img src="2.png"/></div>
  <div class="box2">
    林更新 ...
  </div>      
</div>
</body>
</html>

浏览器渲染效果：

说明：文字会围绕在图片的周围，不会覆盖图片的div1。

4、BFC内外布局不会相互影响

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>BFC内外布局不会相互影响 </title>
</head>
<style>
   .container {
        overflow: hidden;
        width: 100px;
        height: 100px;
        background-color:#f1f1f1;
    }
    .wrapper {
        overflow: hidden;
    }
    .box1 {
        height: 20px;
        margin: 10px 0;
        background-color:#ff67ff;
    }
    .box2 {
        height: 20px;
        margin: 20px 0;
        background-color: yellow;
    }
</style>
<body>
  <div class="container">
      <div class="wrapper">
          <div class="box1"></div>
      </div>
      <div class="box2"></div>
   </div>
</body>
</html>

浏览器渲染效果：

说明：紫色div与黄色div之间的距离是30px。

5、计算BFC高度的时候，浮动元素的高度也计算在内

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>Bootstrap 101 Template</title>
</head>
<style>
   .container {
      width: 500px;
      position: absolute;  /* 创建一个BFC环境*/
      height: auto;
      background-color: #eee;
    }
        
    .box1 {
       width: 200px;
       height: 100px; 
       float:left;  
       border:1px solid #56da78;
     }
        
     .box2 {
        width: 200px;
        height: 100px; 
        float:left;  
        border:1px solid #edda45;
     }

</style>
<body>
<div class="container">
     <div class="box1"></div>
     <div class="box2"></div>
</div>
</body>
</html>

浏览器渲染效果：

说明：container高度没有塌陷，浮动元素box1,box2的高度算在里面

大眼萌

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
CSS中的BFC

第一部分：什么是BFC?BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。第二部分：BFC的特征1、BFC内部，盒子由上至下按顺序进行排列，其间隙由盒子...
复制链接

扫一扫