• 技术文章 >web前端 >前端问答

    css3中什么是bfc

    青灯夜游青灯夜游2022-08-01 16:49:59原创100

    在css3中,BFC的中文意思为“块格式化上下文”,是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。简单来说,BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。 BFC的作用:1、解决外边距折叠问题;2、BFC的区域不会与浮动的元素区域重叠,可创建CSS中常用的两栏布局;3、清除元素内部的浮动。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    一、什么是BFC

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

    说人话:BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。 我们经常使用到BFC,只不过不知道它是BFC而已。

    二、如何创建一个BFC

    常用的方式有以下几种:

    看吧,是不是经常在代码中用到上边列举的属性,你在不知不觉中就开启了BFC,只是你不知道它是BFC而已。

    三、BFC有什么特点

    四、BFC有什么用

    1、解决外边距折叠问题

    外边距折叠(Margin collapsing)也只会发生在属于同一BFC的块级元素之间。

    html:

    <div class="div1"></div>
    <div class="div2"></div>

    css:

    .div1 {
      width: 100px;
      height: 100px;
      background-color: green;
      margin-bottom: 10px;
    }
    
    .div2 {
      width: 100px;
      height: 100px;
      background-color: red;
      margin-top: 20px;
    }

    对第一个div的margin-bottom设置为10px,第二个div的margin-top设置为20px,我们可以看到两个盒子最终的边距是20px,是两者之中较大的一个。这就是外边距重叠的问题。

    1.gif

    为了解决这个问题,我们可以让这两个div分属于不同的BFC,或者只要把其中一个div放到BFC中就可以。原因是:BFC就是页面上的一个隔离的独立容器,容器里面的元素不会对外边产生影响。

    html:

    <div class="wrapper">
      <div class="div1"></div>
    </div>
    <div class="div2"></div>

    css:

    .wrapper{
      /* 开启BFC */
      overflow: hidden;
    }
    
    .div1 {
      width: 100px;
      height: 100px;
      background-color: green;
      margin-bottom: 10px;
    }
    
    .div2 {
      width: 100px;
      height: 100px;
      background-color: red;
      margin-top: 20px;
    }

    现在的代码可以解决外边距重叠的问题啦!但是注意,在我们这个案例中,虽然指定position属性为absolute和fixed,或者float指定为left、right也可以创建BFC,但是这个元素会从当前文档流中移除,不占据页面空间,并且可以和其它元素重叠。导致下边的div会把上边的div给覆盖掉。

    2、制作两栏布局

    BFC的区域不会与浮动的元素区域重叠。

    我们可以利用这个特性来创建CSS中常用的两栏布局(左边宽度固定,右边宽度自适应)。

    HTML:

    <div class="left"></div>
    <div class="right"></div>

    CSS:

    .left {
      width: 200px;
      height: 100px;
      background-color: green;
      float: left;
    }
    
    .right {
      height: 100px;
      background-color: red;
      overflow: hidden; /* 创建BFC */
    }

    效果如图所示:

    2.png

    另一个案例:

    html:

    <div class="father">
      <div class="left"></div>
      <div class="right">
        哈哈哈哈哈哈啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
      </div>
    </div>

    css:

    .father {
      width: 200px;
      border: 5px solid blue;
    }
    
    .left {
      width: 50px;
      height: 50px;
      background-color: green;
      float: left;
    }
    
    .right {
      height: 100px;
      background-color: red;
    }

    当在父元素中只设定一个盒子浮动,另一个不浮动时,会造成第二个盒子在第一个盒子的下方,被覆盖掉一部分(但文字不会被覆盖)。

    效果如图:

    3.png

    给第二个元素设置BFC:

     .right {
       height: 100px;
       background-color: red;
       overflow: hidden;
     }

    效果如图:

    4.png

    3、清除元素内部的浮动

    这里清除浮动的意思并不是清除你设置的元素的浮动属性,而是清除设置了浮动属性之后给别的元素带来的影响。例如我们给子元素设置浮动,那么父元素的高度就撑不开了。

    BFC有一个特性:计算BFC的高度时,浮动元素也参与计算,利用这个特性可以清除浮动。

    html:

    <div class="div1">
      <div class="son1">a</div>
      <div class="son2">b</div>
    </div>

    css:

    .div1 {
      width: 150px;
      border: 1px solid red;
    
      /*使用BFC来清除浮动*/
      overflow: hidden;
    }
    
    .son1, .son2 {
      width: 100px;
      height: 100px;
      background-color: blue;
      float: left;
    }
    
    .son2 {
      background-color: greenyellow;
    }

    5.png

    (学习视频分享:web前端入门

    以上就是css3中什么是bfc的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:CSS3 css BFC
    上一篇:css的内联样式是什么 下一篇:bootstrap中caret代表什么
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• link是不是css3新增样式规则• css3动画是个软件吗• 纯CSS3怎么实现波浪效果?(代码示例)• CSS3动画实战之:超酷炫的粘性气泡效果• 聊聊CSS3中的4个逻辑选择器(快速入手)• 巧用CSS3滤镜制作文字快闪切换动画效果!
    1/1

    PHP中文网