自己对BFC的疑问

素颜马尾好姑娘i 2022-07-28 00:26 242阅读 0赞

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

有几点我很疑惑：  
第一点：  
![这里写图片描述][20160326224515886]

<head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css"> #div1 { float:left; background: red; height: 100px; width: 100px} #div2 { position: absolute; background: blue; height: 200px; width: 200px } </style>
    </head>
    
    <body>
      <div id="div1"></div>
      <div id="div2"></div>
    
    
    </body>

明明给div2声明了position:absolute，那div2应该具有BFC特性了，为什么div2遮住了div1？  
而把div2的overflow:hidden或者display:inline-block,都能得到我们想要的样子，div1不覆盖div2,如下：  
![这里写图片描述][20160326224850156]

第二点：对这句话不是很理解：“在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。”  
对于float:right怎么解释？  
是说右margin碰到border吗？

--------------------

看了张鑫旭的慕课视频，可能得到了解答：  
是不是所有的BFC属性都有如此表现？（详见上一篇文章，BFC规则）  
答案：是，但是由于自身特性，表现不一；  
ovreflow:hidden， 自适应，但溢出不可见，限制应用场景；  
float+float，包裹性+破坏性，无法自适应，块状浮动布局；  
position：absolute，脱离文档流，自娱自乐；  
display：inline-bolck，包裹性，无法自适应，IE6/7 block水平不相识；  
display:table-cell，包裹性，但天生无溢出特性，绝对宽度也能适应。

[20160326224515886]: /images/20220727/e238306d2a594301b50baac174662765.png
[20160326224850156]: /images/20220727/deb90251ff874228aedbb2dd1ca58a86.png

发表评论取消回复

表情：

评论列表（有 0 条评论，242人围观）

还没有评论，来说两句吧...

相关阅读

相关腾讯一面：谈谈你对BFC的理解

最近博主在腾讯面试中遇到这样一个面试题，这个问题也是前端面试的高频问题，作为一名前端开发工程师，css是我们的必备技能，熟悉BFC是我们写好css的关键，博主在这给大家细...

桃扇骨/ 2024年04月17日 10:27/ 0 赞/ 89 阅读

相关 BFC

什么是BFC BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了

我不是女神ヾ/ 2023年01月08日 11:27/ 0 赞/ 136 阅读

相关面试官：谈谈你对BFC的理解？

![5742017054dbdd2373f29a7f367b5a64.png][] 一、是什么我们在页面布局的时候，经常出现以下情况：这个元素高度怎么没了？

深藏阁楼爱情的钟/ 2022年11月16日 10:45/ 0 赞/ 277 阅读

相关对context的疑问

入门知识：https://zhuanlan.zhihu.com/p/307699422 疑问： context.Backgroud() context.

缺乏、安全感/ 2022年09月05日 12:57/ 0 赞/ 181 阅读

相关自己对BFC的疑问

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。有几点我很疑惑：第一点： ![这里写图片描述][2016032622451

素颜马尾好姑娘i/ 2022年07月28日 00:26/ 0 赞/ 243 阅读

相关 BFC

在解释 BFC 是什么之前，需要先介绍 Box、Formatting Context的概念。　　Box: CSS布局的基本单位　　Box 是 CSS 布局的对象和基本单

你的名字/ 2022年05月17日 01:46/ 0 赞/ 208 阅读

相关我对BFC的理解

　　最初这篇文章打算回答寒冬大神的[第一问][Link 1]，谈谈CSS布局。本来呢我以为布局主要涉及float跟display相关属性，以及他们的包含框、静态位置等等。后来看

绝地灬酷狼/ 2022年05月13日 10:26/ 0 赞/ 282 阅读

相关对减少HTTP请求的疑问

教条根据各种Web性能优化手册，“减少HTTP请求”这一条始终被放在显眼的位置，其中就包括著名的[YSlow][]和[Google Page Speed][]，两者对这

不念不忘少年蓝@/ 2022年01月07日 17:05/ 0 赞/ 204 阅读

相关对减少HTTP请求的疑问

教条根据各种Web性能优化手册，“减少HTTP请求”这一条始终被放在显眼的位置，其中就包括著名的[YSlow][]和[Google Page Speed][]，两者对这

柔情只为你懂/ 2021年12月20日 03:33/ 0 赞/ 248 阅读

相关关于对CSS中BFC的理解

也许你已经掌握了`HTML、CSS`的基本布局技能，但是有可能还有一些难以琢磨透的专业名词还不是很清楚，比如`BFC`。今天我们就来聊聊对`BFC`的理解，以便我们在布局的过程

末蓝、/ 2021年06月26日 16:06/ 0 赞/ 507 阅读