8.30——9.4日随笔之一（BFC）

　　好久没发博客了，今天来写写作为前端菜鸟的，由于初学实在没有什么大级别的技术可以说的，就只能写写我对本周学习的知识的领悟。在本周我认识前端的两个要点，一个是BFC还有一个就是面向对象，这两个要点在以前的学习中都没有怎么接触过，所有对我来说这是这周记忆最深刻的。

　　BFC全称块级格式化上下文，它是指一个独立的块级渲染区域，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。区域内部的所有布局都不会对外部产生影响；body内部所有的元素都处于BFC环境下；其它元素想要让内部处于BFC环境则需要声明一下，声明有如下几个：1、float的值不为none时；2、overflow的值不为visible时3、position的值为absolute或fixed时；4、display的值不为none时（这个我记不太清楚了）。在BFC环境下，所有浮动元素的高度也会参与计算，也就是说把触发了BFC状态的父元素给撑开。

　　BFC对页面布局来说，非常有用，但是在同一个BFC环境下，会发生垂直方向上的margin重叠，当发生这种情况时，可以再设置一个dDIV将发生重叠的元素装入，并让DIV触发BFC环境，这样就可以消除垂直方向上的重叠了，因为BFC是隔离的独立容器，容器里面的子元素不会影响到外面的元素。这里可能我写得不是很好，不怎么好理解。

　　触发BFC环境后外界的元素布局也不会产生影响，例如，先设置一个大的DIV，然后在其内部设置两个小DIV，一个稍小的名为A设置为float:left，设置高度和宽度，另一稍大的名为B不设置浮动，只设置高度不设置宽度，我们会看到float：left的DIV会重叠在未设置浮动的DIV上，但是如果我们给B设置触发了BFC,B便会挨着A排布但是B的自身宽度会减少，从而让出A的位置，不会再出现重叠的现象了。

　　在以后的页面布局中，对BFC的使用肯定会非常多，希望能我的技巧更加的熟练。

转载于:https://www.cnblogs.com/webhtmlcss/p/4805284.html