css盒模型－BFC

BFC(边距重叠解决方案)

一、BFC的基本概念：块级格式化上下文

二、BFC的原理（说白了就是BFC的渲染规则）：

这个规则是什么呢？我以为你们能说出4点就够了

第一个就是BFC能够解决这个元素的垂直的边距发生重叠的状况
第二个是BFC的区域不会与浮动元素的box重叠，这个确定是用来清除浮动的。
第三个是BFC在页面上是一个独立的容器，外面的元素不会影响它里面的元素，反过来，里面的元素也不会影响到外面的元素。
第四个就是计算BFC高度的时候，浮动元素也会参与计算，如今比较抽象，等会经过代码演示

三、怎么建立BFC

刚才给父元素加了一个 overflow:hidden就建立了一个BFC，那么除了overflow:hidden，还有哪些写法能建立BFC呢？

第一个是float的值不为none，由于css的float值默认是none，只要设置了浮动就建立了BFC
第二个是position的值不是static或者relative，也就是建立了一个bfc，好比设置成absolute,fixed
第三个是display属性是inline-box或者table-cell，跟table相关的这几个，就建立了BFC
第四个是overflow,overflow为auto,hidden，均可以建立BFC

四、BFC的使用场景有哪些？

 

 

第一部分，解决边距的问题

<!--bfc垂直方向边距重叠-->
<section id="margin">
　　<style>
　　　　#margin{
　　　　　　background: pink;
　　　　　　overflow: hidden;
　　　　}
　　　　#margin>p{
　　　　　　margin: 5px auto 25px;
　　　　　　background: red;
　　　　}
　　</style>
　　<p>1</p>
　　<p>2</p>
　　<p>3</p>
</section>

父级元素是建立了bfc的，如图，咱们发现上边距是5px，1和2和3之间的间隔是25px，由于1的下边距和2的上边距发生了重叠，重叠的时候根据取最大值的原则。若是我不想让它重叠，就给子元素增长一个父元素，给这个父元素建立一个bfc就能解决这个问题

<!--bfc垂直方向边距重叠-->
<section id="margin">
　　<style>
　　　　#margin{
　　　　　　background: pink;
　　　　　　overflow: hidden;
　　　　}
　　　　p{
　　　　　　margin: 5px auto 25px;
　　　　　　background: red;
　　　　}
　　</style>
　　<p>1</p>
　　<div style="overflow:hidden">
　　　　<p>2</p>
　　</div>
　　<p>3</p>
</section>

 

如图，这样咱们发现1和2，2和3之间的间隔变大了，没有重叠

bfc的原理之一BFC能够解决这个元素的垂直的边距发生重叠的状况 && overflow为auto,hidden，能够建立BFC

第二部分，解决布局的问题

<!--跟布局相关的bfc-->
<section id="layout">
　　<style>
　　　　#layout{
　　　　　　background: red;
　　　　}
　　　　#layout .left{
　　　　　　float: left;
　　　　　　width: 100px;
　　　　　　height: 100px;
　　　　　　background: pink;
　　　　}
　　　　#layout .right{
　　　　　　height: 110px;
　　　　　　background: #ccc
　　　　}
　　</style>
　　<div class="left"></div>
　　<div class="right"></div>
</section>

如图，咱们发现，灰色的部分高度增高的时候，下面的部分侵入了左侧的占位，这个是float的一个特性，当左侧没有float元素的时候，依然会往左侵染，显然，这不符合咱们布局的目的，那么就须要给右侧的元素建立一个bfc,bfc的原理之一是bfc的元素不会与float元素相互重叠，如今是重叠的，那么建立bfc之后就不会与float重叠了

<!--跟布局相关的bfc-->
<section id="layout">
　　<style>
　　　　#layout{
　　　　　　background: red;
　　　　}
　　　　#layout .left{
　　　　　　float: left;
　　　　　　width: 100px;
　　　　　　height: 100px;
　　　　　　background: pink;
　　　　}
　　　　#layout .right{
　　　　　　height: 110px;
　　　　　　background: #ccc; 　　　　　　overflow: auto;
　　　　}
　　</style>
　　<div class="left"></div>
　　<div class="right"></div>
</section>

 

给right元素加一个overflow，建立一个bfc，如图，状况就变了，不会与左侧元素重叠

bfc的原理之一，BFC的区域不会与浮动元素的box重叠 && overflow为auto,hidden，能够建立BFC

 

 

第三部分，计算高度

<!--浮动元素-->
<section id="float">
　　<style>
　　　　#float{
　　　　　　background:red
　　　　}
　　　　#float .float{
　　　　　　float: left;
　　　　}
　　</style>
　　<div class="float">我是浮动元素</div>
</section>

 

 

如图，浮动元素的父元素高度为0，没有了背景色。这个就是子元素遇到浮动的时候，它的高度计算没有包含进来，若是当这个父元素设置为bfc的时候，子元素的高度也会参与到父元素的高度计算中来

<!--浮动元素-->
<section id="float">
　　<style>
　　　　#float{
　　　　　　background:red;
　　　　　　/* overflow: auto; */ 　　　　　　float: left;
　　　　}
　　　　#float .float{
　　　　　　float: left;
　　　　}
　　</style>
　　<div class="float">我是浮动元素</div>
</section>

给父元素加个overflow或者float建立了bfc，那么就计算子元素高度，就算子元素是float，也会计算

bfc原理之一计算BFC高度的时候，浮动元素也会参与计算 && float的值不为none，设置了浮动就建立了BFC