什么是BFC?它的作用是什么?

文章目录

    • 1.BFC定义
        • 创建BFC的条件
        • BFC的特点
    • 2.BFC的作用

1.BFC定义

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

通俗来讲:BFC是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆
放,并且不会影响其它环境中的物品。如果一个元素符合触发BFC的条件,则BFC中的元素布局不受外部
影响。
补充两个相关概念:

  • Box: Box 是 CSS 布局的对象和基本单位,⼀个⻚⾯是由很多个 Box 组成的,这个Box就是我们所
    说的盒模型。
  • Formatting context:块级上下⽂格式化,它是⻚⾯中的⼀块渲染区域,并且有⼀套渲染规则,它
    决定了其⼦元素将如何定位,以及和其他元素的关系和相互作⽤。

创建BFC的条件

  • 根元素:body;
  • 元素设置浮动:float 除 none 以外的值;
  • 元素设置绝对定位:position (absolute、fixed);
  • display 值为:inline-block、table-cell、table-caption、flex等;
  • overflow 值为:hidden、auto、scroll;

BFC的特点

  • 垂直方向上,自上而下排列,和文档流的排列方式一致。
  • 在BFC中上下相邻的两个容器的margin会重叠
  • 计算BFC的高度时,需要计算浮动元素的高度
  • BFC区域不会与浮动的容器发生重叠
  • BFC是独立的容器,容器内部元素不会影响外部元素
  • 每个元素的左margin值和容器的左border相接触

2.BFC的作用

1)解决margin的重叠问题:由于BFC是一个独立的区域,内部的元素和外部的元素互不影响,将两个元素变为两个BFC,就解决了margin重叠的问题,具体方法如下

  • 子元素变为行内盒子: display: inline-block
  • 子元素加入浮动属性或定位

2)解决高度塌陷的问题(清除浮动):在对子元素设置浮动后,父元素会发生高度塌陷,也就是父元素的高度变为0。解决这个问题,只需要把父元素变成一个BFC,因为BFC的高度包含浮动元素的高度。常用的办法是给父元素设置overflow:hidden
3)创建自适应两栏布局:两栏布局,左边的宽度固定,右边的宽度自适应

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
   *{
     margin: 0px;
     padding: 0px;
     box-sizing: border-box;
   }
   html,body{
     height: 100%;
   }
   /* 浮动 */
   .container{
     height: 100%;
     background-color: aqua;
   }
   .left{
     float: left;
     width: 200px;
     height: 100%;
     background-color: blanchedalmond;
   }
   .right{
     width: auto;
     height:100%;
     background-color: pink;
     overflow: hidden;
   } 
 </style>
</head>
<body>
 <!-- 两栏布局 -->
 <div class="container">
   <div class="left">左边</div>
   <div class="right">右边</div>
 </div>

</body>
</html>

左侧设置float:left,右侧设置overflow:hidden。这样右边就触发了BFC,BFC的区域不会与浮动元素发生重叠,所以两侧就不会发生重叠,实现自适应两栏布局。

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