星空网 > 软件开发 > 网页设计

浅入“Block Formatting Context”

本文主要是针对BFC特性的应用,至于什么是BFC,可以参看MDN的简介:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
 
   
使用Block Formatting Context可以解决如下问题:
 
  (1)父元素的垂直外边距不会和子元素的垂直外边距重叠
  (2)开启该特性的元素不会被浮动元素所覆盖
  (3)开启该特性的父元素可以包含浮动的子元素
 
BFC的这个特性默认是不具有的,所以我们需要手动的去开启这个特性,开启的方法如下所示:
 
  (1)设置浮动(脱离了文档流)
  (2)设置绝对定位(脱离了文档流)
  (3)设置display为inline-block(如果是块级元素,这样设置会具有行内元素的特性)
  (4)设置overflow设置为除visible之外的值(副作用最小的方式)

(1)使用BFC特性解决块级父元素无法包含浮动子元素的问题
利用上面的BFC的第三点特性就可以解决该问题。
首先,我们先进行一下问题场景重现。如下所示的两个div
1 <div class="box1">2   <div class="inBox1">3 4   </div>5 </div>

box1中包含inBox1,当我们不显示的给box1设置一个高度时,box1的高度取决于inBox1的高度,也就是子元素会把父元素“撑开”。效果如下所示:
浅入“Block Formatting Context”如图所示,红色边框的是box1,蓝色边框的是inBox1。CSS如下:
 1 <style type="text/css"> 2   /* 3     设定box1的样式 4   */ 5   .box1{ 6     border: 5px solid red; 7   } 8   /* 9     设定box1内部的inBox1的样式10   */11   .box1 .inBox1{12     width: 100px;13     height: 100px;14     border: 1px solid blue;15   }16 </style>

接下来,如果我们手动的为inBox1设置一个浮动属性(float:left;),就会成为如下所示的效果:
浅入“Block Formatting Context”这时,我们就可以形象的称父div——box1出现了“高度塌陷”问题。
造成这个问题的原因就是给inBox1设置了浮动属性后,子div和父div不在同一层了,所以子元素就无法承担起“撑开”父元素的任务了。
解决方法就是将box1的overflow属性设置为hidden。这样设置的好处就是副作用很小。添加后如下所示:
浅入“Block Formatting Context”
(2)使用BFC特性解决父元素的垂直外边距和子元素的垂直外边距重叠
场景还原如下:
<!DOCTYPE html><html><head>  <title>BFC</title>  <style type="text/css">    /*      设定box1的样式     */    .box1{      background-color: red;    /* 为了演示重叠,我们给父元素也设置一个上外边距 */            margin-top: 20px;    }    /*      设定box1内部的inBox1的样式     */    .box1 .inBox1{      width: 100px;      height: 100px;      border: 1px solid yellow;            /* 为子元素设置一个上外边距 */      margin-top: 100px;    }  </style></head><body>  <div class="box1">    <div class="inBox1">    </div>  </div></body></html>

在运行结果中我们可以看到子元素的上外边距与父元素的上外边距发生了重叠,并且取了一个最大值,也就是子元素的上外边距。
浅入“Block Formatting Context”也许我们想要的效果并不是这样的,我们需要子元素以父元素的上边界外参考设置margin-top,解决方法同样是为父元素设置overflow:hidden;属性,效果如下所示:
浅入“Block Formatting Context”
(3)使用BFC特性解决浮动覆盖问题
如果有两个div如下所示:
浅入“Block Formatting Context”如果我们给红色div块加上一个左浮动属性,则红色块会脱离文档流并位于文档流上层,所以红色块会盖住蓝色块。效果如下所示:
浅入“Block Formatting Context”为了不让蓝色块被盖住,我们可以给蓝色块设置一个overflow:hidden;开启BFC特效,效果如下所示:
浅入“Block Formatting Context”代码如下所示:
 1 <!DOCTYPE html> 2 <html> 3 <head> 4   <title>BFC</title> 5   <style type="text/css"> 6     /* 7       为box1设置样式 8     */ 9     .box1{10       width: 100px;11       height: 100px;12       background-color: red;13       /* 为红色块设置一个浮动属性,使其脱离文档流 */14       float: left;15     }16     /*17       为box2设置样式18     */19     .box2{20       width: 100px;21       height: 100px;22       background-color: blue;23       /* 为蓝色块开启BFC特性 */24       overflow: hidden;25     }26   </style>27 </head>28 <body>29   <div class="box1">30     31   </div>32   <div class="box2">33     34   </div>35 </body>36 </html>

 


















原标题:浅入“Block Formatting Context”

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

美国第二大零售商Target宣布推出第三方卖家平台:https://www.ikjzd.com/articles/17491
如何快速入驻日本乐天、雅虎拍卖:https://www.ikjzd.com/articles/17492
亚马逊遭阻击!Google Shopping全面开放卖家注册:https://www.ikjzd.com/articles/17493
东南亚电商平台Lazada与shopee那个好_Lazada与shopee平台有什么区别:https://www.ikjzd.com/articles/17496
官宣:Target宣布第三方卖家平台Target +正式上线啦!:https://www.ikjzd.com/articles/17498
商标被抢注怎么办? 应对抢注商标的三种方法!:https://www.ikjzd.com/articles/17499
长治婚庆女司仪和主持人:https://www.vstour.cn/a/366176.html
北京丰台区水上乐园哪家好玩?:https://www.vstour.cn/a/366177.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流