css盒模型-BFC

BFC(边距重叠解决方案) 1、BFC的基本概念:块级格式化上下文 2、BFC的原理(说白了就是BFC的渲染规则): 这个规则是什么呢?我觉得大家能说出4点就够了

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

3、怎么创建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

4、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

 

相关文章