宜宾网站建设公司

CSSBFC是什么及有什么作用

这篇文章主要讲解了“CSS BFC是什么及有什么作用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS BFC是什么及有什么作用”吧！

十载的乌审网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。全网营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整乌审建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联从事“乌审网站设计”,“乌审网站推广”以来，每个客户项目都认真落实执行。

在了解BFC(Block Formatting Context)之前，我们先来看看FC(Formatting Context)是什么：

CSS BFC是什么及有什么作用

这段话来自W3C官网，我们可以得到如下信息：

  • 所有的盒子都属于一个FC

  • 块级元素的布局属于一个BFC。例如div/p/h2等 -> BFC布局中

  • 行内级元素的布局属于一个IFC。例如img/a/span/i -> IFC布局中

简单理解：块级元素所在的布局和上下文就是BFC，行内级元素所在的布局和上下文就是IFC

问题1.块级元素都是在BFC中布局的，那么这个BFC在哪里呢

首先我们先看一下W3C的官方解释：

CSS BFC是什么及有什么作用

MDN上整理出的下了情况会创建BFC：

  • 根元素(html)

  • 浮动元素(元素的float值不是none)

  • 绝对定位元素(元素的position为absolute或者fixed)

  • 行内块元素(元素的display为inline-block)

  • 表格单元格(元素的display为table-cell，HTML表格单元格默认为该值，表格标题(元素的display为table-caption，HTML表格标题默认为该值)row，tbody，thead，tfoot的默认属性)或inline-table)

  • overflow计算值(Computed)不为visible的块元素

  • 弹性元素(display为flex或inline-flex元素的直接子元素)

  • 网格元素(display为grid或inline-grid元素的直接子元素)

  • display值为flow-root的元素

由此可见



  
    
    
    
    Document
  
  
    

    

  

这段代码中的box1和box2都是在html根元素的BFC中布局的

问题2.BFC的作用

首先先看一下官方文档对BFC作用的描述:

CSS BFC是什么及有什么作用

我们可以得到的信息：

  • 在一个BFC中，盒子会从包含块的顶部开始，在垂直方向上会一个挨着一个摆放，可能很多人都对这一点习以为常，但这点是BFC帮助我们实现的。当我们对某个盒子设置一个margin-top的时候，BFC会帮助我们解析，然后会在盒子布局时候给一个上边距

  • 在一个BFC中，每个元素的左边缘都会紧贴着包含块的左边缘

  • 在同一个BFC中，在垂直方向上，相邻两个盒子的margin会重叠，值取两者中较大的(可以利用此特性解决margin重叠问题)

作用1：利用BFC解决margin重叠问题


  
    
    
    
    Document
    
  
  
    

    

  

此时box1和box1此时同处于html的BFC中，并且box1和box2在垂直方向上相邻，所以会出现margin重叠，取两者其中较大的值50px

CSS BFC是什么及有什么作用

如何解决呢？可能很多人会想到直接给box1添加一个BFC，所以直接给box1添加个overflow:hidden属性



  
    
    
    
    Document
    
  
  
    

    

  

结果呢？

CSS BFC是什么及有什么作用

发现并不起作用。可能此时很多人就懵了，box1此时不是明明已经形成了BFC了嘛，为什么还会发生重叠？让我来给你解释一下，首先此时box1确实是已经形成了BFC（可以理解成box1内部形成了BFC），但是对于box1这个元素的本身，还是和box2同属于html的BFC中，所以还是会发生margin重叠

所以我们要给box1套一层，然后给box1外层的盒子设置BFC



  
    
    
    
    Document
    
  
  
    

      

    

    

  

此时box1属于container的BFC，而box2属于html的BFC，不属于同一个BFC，所以就能解决margin重叠问题

CSS BFC是什么及有什么作用

作用2：解决浮动高度塌陷问题

当我们给container里面的四个item设置浮动的时候，很明显，这几个元素都会脱离文档流，此时container不会有高度



  
    
    
    
    Document
    
  
  
    

      

      

      

      

    

  

CSS BFC是什么及有什么作用

很多网上博主说，通过给container设置一个BFC，内部的浮动元素就会向其汇报高度，然后container就能解决浮动高度塌陷问题，这个做法是正确的，但是这个说法其实是错误，并不是因为其内部的浮动元素向其汇报了高度

事实上，想通过BFC解决高度塌陷问题需要满足两个条件：

  • 浮动元素的父元素触发BFC，形成独立的块级格式化上下文(BFC)

  • 浮动元素的父元素高度为auto

首先我们先看一段W3C的描述

CSS BFC是什么及有什么作用

大致意思为BFC的高度是auto情况下，高度是这样计算：

  • 如果只有inline-level，是行高的顶部和底部的距离

  • 如果有block-level，是有最底层的块上边缘和最底层块盒子的下边缘之间的距离（有margin也会计算在内）

  • 如果有绝对定位元素，将被忽略（所有我们无法通过BFC解决绝对定位的高度塌陷问题）

  • 如果有浮动元素，那么会增加高度以包括这些浮动元素的下边缘（这才是BFC能解决浮动元素塌陷问题的原因，并不是因为浮动元素向上汇报了高度）

所以我们直接给container通过添加overflow属性设置BFC，则由于上述第四条4特性，container会增加高度来包括内部四个item浮动元素下边缘，所以解决了浮动塌陷问题



  
    
    
    
    Document
    
  
  
    

      

      

      

      

    

  

CSS BFC是什么及有什么作用

感谢各位的阅读，以上就是“CSS BFC是什么及有什么作用”的内容了，经过本文的学习后，相信大家对CSS BFC是什么及有什么作用这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！


新闻名称：CSSBFC是什么及有什么作用
分享地址：http://ybzwz.com/article/jhejdg.html

其他资讯