BFC的理解与应用

什么是BFC(Block formatting contexts)

 

  • BFC的通俗理解:

 

        首先BFC是一个名词,是一个独立的布局环境,我们可以理解为一个箱子(实际上是看不见摸不着的),箱子里面物品的摆放是不受外界的影响的。转换为BFC的理解则是:BFC中的元素的布局是不受外界的影响(我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。)并且在一个BFC中,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直的沿着其父元素的边框排列。

  • BFC的运用

  在w3c的规范中,除了上面的一段定义之外,BFC的相关知识点分布地比较零散,但基本集中在float、绝对定位、margin collaspe中。下面我们来看看如何应用到BFC来解决问题。

  •   应用一:在很多网站中,我们经常会看到这样的一种,左边图片+右边信息的两栏结构,下面我们来看看如何利用BFC来实现。  

  首先我们给出这样的结构:

  

 1 //CSS
 2 *{margin: 0;padding: 0;}
 3 .box {width:210px;border: 1px solid #000;float: left;}
 4 .img {width: 100px;height: 100px;background: #696;float: left;}
 5 .info {background: #ccc;color: #fff;}
 6 //HTML
 7 <div class="box">
 8     <div class="img">image</div>
 9     <p class="info">信息信息信息信息信息信息信息息信息信息信息信息信息信息信息信</p>
10 </div>

 

 

 

 

  • 但随着文字信息增多后,会变地非常的糟糕:

 

 

 很明显,这是因为info类里面的文字受到了浮动元素的影响,但这并不是我们所期望的。此时我们可以为P元素的内容建立一个BFC,让其内容消除对外界浮动元素的影响。根据上文所知,只要给info元素添加overflow:hidden;即可为其内容建立新的BFC。当然你也可以通过其他方法来建立。其效果如下:

 

.info {background: #ccc;color: #fff;overflow: hidden;}

 

 

  •  

       应用二:清楚内部浮动

        我们来看下面的代码

  

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             .box{
 8                 width:600px;
 9                 height: auto;
10                 border:2px solid #f00;
11                 margin:30px auto;    
12       
13             }
14             .content1{
15                 height:200px;
16                 width: 200px;
17                 background:#f0f;
18                 float:left;
19             }
20             .content2{
21                 height:200px;
22                 width: 350px;
23                 background:#0ff;
24                 float: right;
25             }
26         </style>
27     </head>
28     <body>
29         <div class="box">
30             <div class="content1"></div>
31             <div class="content2"></div>
32         </div>
33     </body>
34 </html>

 

 

     

 

 

   会发现box高度塌陷, 当第一级子元素有浮动并且父元素没有高度的情况下父元素会出现高度塌陷

解决方法:

hack1:在浮动元素下方添加空div,并给该元素添加 声明:div{clear:both; height:0; overflow:hidden;} 弊端:会添加空标记,增加结构负担,代码冗余。

hack2:万能清除浮动法 (用单冒号,兼容性) 选择符:after{content:“";clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}(后面三个做兼容处理的)

hack3:给父元素添加声明overflow:hidden;(触发一个BFC):弊端:当子元素内容超出父元素以外溢出会隐藏不好。

 

 

我这里使用给父元素添加overflow:hidden;

1 .box{
2     width:600px;
3     height: auto;
4     border:2px solid #f00;
5     margin:30px auto;    
6         overflow:hidden;            
7      }    

  效果如下:

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值