BFC对于布局的帮助

时间 2019-11-17

标签 bfc 对于布局帮助繁體版

原文原文链接

　　前几天在园子里看文章的时候看到了BFC这个概念，对于小白的我来讲那是至关的陌生，因而就百度了一下。结果仍是有不少的，看来并不算是一个冷僻的知识。因而来总结一下搜索到的一些结果和理解。css

　　那么，什么事BFC呢？BFC是块级格式化上下文（Block Formatting Context）的简写，用来规范块级容器的布局方式。主要的特性是有如下几点：布局

　　　　1.隔绝空间。使BFC内外的布局不会相互影响（我的猜想，在写一些ui控件的时候是否是应该将嘴歪层设置一个BFC，但愿哪位大神给讲解一下）ui

　　　　2.BFC内的元素从上至下一次排列，尽量的高级上方(同级元素在垂直方向上的margin会存在塌陷，这个问题之前常常碰到，一直认为是个bug)，水品方向的排列spa

　　　　 方向由你的水平对齐方式决定，子元素的margin和紧贴着BFC的bordercode

　　　　3.BFC的区域不会同浮动元素的区域叠加orm

　　　　4.BFC的区域在计算高度时会计算其内浮动元素的高度blog

　　说了这么多的特性，那么怎样去创建一个BFC呢？从w3c的介绍里能够获得：　　　　utf-8

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with ‘overflow’ other than ‘visible’ (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.ci

　　大概的意思是：浮动元素，绝对定位元素，非块级盒子的块级容器（如inline-block,table-cells,以及table-caption）和overflow不为visible的块级盒子都会为其子元素创建一个BFC。用代码就是：element

　　　　float:left|right;

　　　　position:absolute|fixed;

　　　　display:inline-block|table-cells|table-captions;

　　　　overflow:hidden;

　　那么还有一个问题要注明是非块级盒子的块级容器呢？既然是块级格式化上下文，为何不包含块级盒子？个人理解是，在一个页面中，以块级盒子居多，特别是div+css布局的时候，整个页面可能有上百个块级盒子，这样整个页面就被分红了上百个BFC。因为BFC有内外隔离的特性，反而会致使布局上更加困难？

　　讲了一大堆的理论，到底BFC有什么用？能解决什么问题？这个才是咱们最关注的东西（俗话说，不能解决问题的理论都是扯**蛋）。我知道的就是两个，其余的欢迎你们来补充：

　　1.清楚浮动

　　　　根据 BFC的区域在计算高度时会计算其内浮动元素的高度 以及 BFC隔绝内外布局 的特性（我猜的…）能够知道，当BFC内有浮动元素而且浮动元素的高度高于其余全部元素时，BFC的高度等于浮动元素的高度。为了方便说明，来上个图吧

　　这张是在未建立BFC时的状态，对应的代码是：

<head>
　　<meta charset="utf-8">
　　<title>BFC</title>
　　<style>
　　　　.bfc{ margin: 100px 0;background: #777;overflow: hidden; }
　　　　.float{ float: left;width: 100px;height: 200px;background: green;opacity: .6;color: white; }            
　　　　.default{ width: 300px;height: 100px;background: red; }
　　</style>
</head>
<body>
　　<div class="bfc">
　　　　<div class="float">float</div>
　　　　<div class="default">default</div>
　　</div>
</body>

　　能够看到，外层的.bfc的高度等于.default的高度，浮动元素并未被计算在内，致使了高度的塌陷。

　　再来看看这张，在外层.fbc上建立了BFC以后的效果

.bfc{ margin: 100px 0;background: #777;overflow: hidden; }

　　此时，浮动呗清除，.float的高度被计算在.bfc内。之前一直不明白为何overflow能够清除浮动，其实就是由于BFC的帮助。

　　2.解决子元素与父元素间margin失效的问题

　　先看下面这段代码　　

 1 <head>
 2     <meta charset="utf-8">
 3     <title>BFC</title>
 4     <style>
 5         .bfc{ width: 200px;height:200px;margin: 10px auto; background: #ddd}
 6         .bfc>div{ width: 100px;height:100px;margin:50px;background: green }            
 7     </style>
 8 </head>
 9 <body>
10     <div class="bfc">
11         <div></div>
12     </div>
13 </body>

　　你以为效果是什么？这样吗？

　　咋一看好像是的，可是结果呢？

　　这个才是正确答案，为何？咱们从BFC的特性中去看看。BFC中的元素在垂直方向上会尽量的往上方贴近，因而子元素的margin-top紧贴着父元素的border-top，致使父子元素之间的margin消失了。这个问题我在之前常常碰到，当时的解决方案是用padding代替margin，可是仍是会有一些小问题，好比我想给子元素一个border-bottom,可是border-bottom的宽度会贯穿整个父元素。最后的替代解决方案是父元素使用用margin和padding，而子元素什么都不设置。在看完BFC以后明白，只要在父元素上设置overflow：hidden为其建立BFC以后问题就解决了。

　　好了。我所了解的BFC就是这样的，可能还有不少特性我不知道，再次欢迎高手指正。

　　看一下时间… 写了1个多小时，看看文章好像并不长的样子。应该是第一次写的缘由吧！！休息一会，能够吃午餐了。