格式化上下文杂谈


皇帝的金斧头
我基本对css没有系统的学习,都是在平常中写html与js中积累下来的知识,如有错误,希望能提出,同时有疑惑可以交流,下文是我看了4天bfc中浓缩的观点。
布局的思考
布局主要通过定位体系实现,定位体系决定着框的摆放。一门语言就像一种工具,不但能干活,人用着得舒服,总不能制作一个扳手,你往左扳,螺丝向右旋吧。
对css的定位体系来说,三种定位方式就是工具,使框能摆放到需要的位置,实现了布局,常规流定位使元素自动流动到所需位置,浮动使周围元素环绕,绝对定位硬性规定元素的位置。通过定位机制,元素能摆放到某个位置。这是能干活了,但是,有时候用着却不舒服。

图1-1

图片1-1

如图1-1,发现box_2的布局与box_1存在了margin,但是也受到box子元素inner的影响。这个就不符合人类直觉了,明明代码存在了层次关系,但实现时子元素作为浮动元素,溢出了父元素的框架,对页面其他元素造成影响。所以必须对定位体系进行改进以实现可控且清晰的布局。所以就引入了bfc的概念,在很多文章中都是把bfc形容成一个容器,容器内外元素互不干扰。所以进行容器布局时,只需考虑父子、兄弟关系了,


以下是一些个人分析,适合有bfc基础的同学思考。
我认为规则就只有两点:
1、bfc元素是容器,那必定会产生隔离,隔离是对子元素的隔离,所以子元素的margin不与容器margin合并;
2、bfc不会发生框重叠;兄弟关系的两个bfc,如果其中存在浮动框,就左右摆放,如果是父子关系的两个bfc,就通过包含关系,所以这就是bfc能计算框内浮动元素高度的原因了。
其他bfc的规则,你不难发现其实是常规流的布局规则,因为bfc也是属于常规流,继承规则的同时进行了扩展。
可能有些同学对bfc的margin合并存在理解的偏差,可看如何解决外边距叠加的问题这个讨论,一定要看评论的内容,看完基本不难理解bfc与margin合并这两个概念了。


每日小问
2016年1月1日23:15:06

#div1{width: 200px; height: 200px;overflow:hidden;margin:20px;background:#AA0;}
#div2{width:200px; height: 200px;overflow:hidden;margin:20px;background:#0AA;}
<div id='div1'></div>
<div id='div2'></div>

这里两个div间距离多少,为什么?

#container{width: 300px;height: 300px;float: left;}
#div1{width: 200px; height: 200px;float: left;;margin:20px;background:#AA0;}
#div2{width:200px; height: 200px;float: left;;margin:20px;background:#0AA;}
<div id='container'>
    <div id='div1'></div>
    <div id='div2'></div>
</div>

这里两个div间距离多少,为什么?

答案在明天的文章中。


欢迎指出文章的错误,如有对文章观点有疑惑希望能提出互相交流。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,790评论 1 92
  • 什么是BFC BFC全称是Block Formatting Context,即块格式化上下文。它是CSS2.1规范...
    clfeng阅读 481评论 0 0
  • relative:生成相对定位的元素,通过top,bottom,left,right的位置相对于其正常位置进行定位...
    zx9426阅读 963评论 0 2
  • 一、BFC是什么? 它是 Block Formatting Context (块级格式化上下文) 的简称,接下来通...
    07120665a058阅读 3,814评论 15 40
  • BFC(块级格式化上下文) @(CSS)[CSS|BFC] [TOC]已经是一个耳听熟闻的词语了,网上有许多关于 ...
    dr2009阅读 17,841评论 3 61