码迷,mamicode.com
首页 > 其他好文 > 详细

BFC与文档流对比

时间:2020-10-19 22:40:31      阅读:18      评论:0      收藏:0      [点我收藏+]

标签:isp   理解   堆叠   ext   text   head   顺序   pos   没有   

一BFC(Block formatting context): 称为块级格式化上下文,是CSS中的一种渲染机制。是一个拥有独立渲染区域的盒子(也可以理解为结界),规定了内部元素如何布局,并且盒子内部元素与外部元素互不影响。

 

二 文档流和非文档流的定义:

  1.  文档流:将窗体自上而下分成一行行,并在每一行中按从左到右的顺序来排放元素,这个我们称之为文档流。
  2. 非文档流(脱离文档流):也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位。
  3. 下面有三种定位将使元素脱离文档流;一旦该元素脱离文档流,后面的元素都会做相应的位置调整: 1 float 2绝对定位:position:absolute 3固定定位 :position:fixed(注意:在IE中浮动也是存在于文档流中的。)
  4. 需要注意的是,使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在周围。而对于使用absolute 脱离文档流的元素,其他盒子与其他盒子内的文本都会无视它。
  5. z-index属性指定了一个元素的堆叠顺序;一个元素可以有正数或负数的堆叠顺序;注意: 如果两个定位元素重叠,没有指定z - index,最后定位在HTML代码中的元素将被显示在最前面。

 

BFC与普通文档流比较:https://blog.csdn.net/baidu_37107022/article/details/71634396

BFC原理总结与实践:https://juejin.im/post/6844904082226987021#heading-3

BFC与文档流对比

标签:isp   理解   堆叠   ext   text   head   顺序   pos   没有   

原文地址:https://www.cnblogs.com/terrymin/p/13839845.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!