神奇的BFC

标签:str   特性   理解   部分   绝对定位   format   网格元素   i see   解决办法   

BFC是什么

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

I know it when I see it

所以,虽然我不知道什么是BFC,但是写出样式,我就能知道这是不是BFC

BFC就是这样的东西

  • 它没有定义
  • 它只有特性/功能

BFC特性/功能

    • 使用BFC 包住浮动元素
    • 和浮动元素产生边界

 

如何回答面试官呢

接下来,我们继续看官方文档,满足其中之一的都是建立了一个BFC

下列方式会创建块格式化上下文:

  • 根元素(<html>)
  • 浮动元素(元素的 float 不是 none)
  • 绝对定位元素(元素的 position 为 absolute 或 fixed)
  • 行内块元素(元素的 display 为 inline-block)
  • 表格单元格(元素的 display 为 table-cell,HTML表格单元格默认为该值)
  • 表格标题(元素的 display 为 table-caption,HTML表格标题默认为该值)
  • 匿名表格单元格元素(元素的 display 为 tabletable-row、 table-row-grouptable-header-grouptable-footer-group(分别是HTML table、row、tbody、thead、tfoot 的默认属性)或 inline-table)
  • overflow 值不为 visible 的块元素
  • display 值为 flow-root 的元素
  • contain 值为 layout、content或 paint 的元素
  • 弹性元素(display 为 flex 或 inline-flex元素的直接子元素)
  • 网格元素(display 为 grid 或 inline-grid 元素的直接子元素)
  • 多列容器(元素的 column-count 或 column-width 不为 auto,包括 column-count 为 1)
  • column-span 为 all 的元素始终会创建一个新的BFC,即使该元素没有包裹在一个多列容器中(标准变更,Chrome bug)。 块格式化上下文包含创建它的元素内部的所有内容.

 

如何创建BFC?

读完MDN后,我们知道,满足其一,就是建立了一个BFC

  • float的值不是none
  • position的值是absolute、fixed
  • display的值是inline-block、flow-root、table-cell、table-caption、flex或者inline-flex、grid或者inline-grid
  • overflow的值不是visible

接下来,让我们看几个例子吧,使我们加深对其功能的理解

功能1 用BFC包住浮动元素

子元素浮动,脱离了普通文档流,父元素包不住子元素

没有产生BFC

这个时候如果想父元素包裹住子元素,该怎么办呢?

让父元素产生一个BFC

解决办法一:让父元素浮动 浮动产生BFC

解决办法二:让父元素绝对定位

绝对定位产生BFC

解决办法三:让父元素变成行内块元素

display:inline-block产生BFC

解决办法四:让父元素的overflow设置为hidden

overflow:hidden产生BFC

解决办法五:让父元素的display设置为flow-root(触发BFC,无副作用)

display:flow-root产生BFC

注意:如果父元素产生了BFC,会把浮动的子元素包住,但是如果子元素里面还有浮动的子元素(也就是浮动的孙子),这时,父元素是不会包住孙子元素的

功能二 和浮动元素产生边界

兄弟元素之间,其中左边元素浮动,让其划清界限

没有产生BFC

用 float+div 做左右自适应布局

解决办法一:浮动元素的margin-right没有生效,这个例子中,如果没有BFC,我们想要产生边距,需要将普通元素的margin-left设置为浮动元素宽度+想要产生的边距宽度

没有产生BFC

解决办法二:让右侧兄弟元素的display设置为flow-root

display:flow-root产生BFC

解决办法三:让右侧兄弟的display设置为flex

dispaly:flex产生BFC

解决办法四:让右侧兄弟元素的overflow设置为hidden

overflow:hidden产生BFC

总结

BFC就是页面上一个单独的容器,容器内部的元素不会影响到外面的元素

不明白BFC的概念,但是我们看到后,就知道这是BFC

所以,面试时不要去讲解BFC的定义!

那么,面试时如何说明BFC呢?举例子!!

神奇的BFC

标签:str   特性   理解   部分   绝对定位   format   网格元素   i see   解决办法   

原文地址:https://www.cnblogs.com/sunsunshine/p/14129739.html

版权声明:完美者 发表于 2020-12-18 12:57:58。
转载请注明:神奇的BFC | 完美导航

暂无评论

暂无评论...