css 之 BFC

　　　　

1，定义

　　BFC为块级格式化上下文，也就是一块区域内的封闭空间，里面元素不管怎么样，都不会影响外部元素。

2，触发条件

• html 根元素
• display的值为 inline-block、table-cell和table-caption中的任何一个
• position的值不为relative和static
• overflow的值为auto、scroll或者hidden
• float的值不为none

3，基本用途

　　1，去除margin重叠

　　　　BFC不会影响外面的元素，因此BFC元素确定不会发生margin重叠，由于margin重叠会影响外面的元素的。

　　2，清除浮动的影响

　　　　若是没有清除浮动带来的父元素高度坍塌的话，那么势必会影响后面元素的布局，因此BFC会清除浮动带来的影响。

　　　　因此只要元素符合BFC的触发条件，就不用再加其余多余的clearfix去清除浮动的影响了

4，进阶技巧

　　BFC与流体布局

　　　　BFC的特性带来的用法最重要的其实不是去margin重叠或者清除浮动，而是实现更好的自适应布局。举例说明：

                                                                      

 

　　　　通常状况下  这种左边图像，右边是介绍文字的布局很常见。

<style>
        img{width:50px;height:50px;float:left;}
</style>

<div class="box">
        <img src="images/e.png" alt="">
        <p>婚姻如一所房子，是让它住满阳光，装满温暖，仍是让它空空如也，凄凉寒冷，要看你往里面放的是爱心仍是冷漠。
　　　　　　　若是两人都努力爱对方，给对方爱的包容呵护，给对方爱的理解，这房子里就会长出爱的种子，房子里的每一个物件、每一个角落都会充满爱的样子。
           若是你往里面放的是恶言秽语、蛮横暴力，房间就会阴冷，如寒冬彻骨。因此想看的婚姻甜蜜的样子，就多注入爱的蜜汁，让房间里的人和物都活出爱的味道。
        </p>
</div>

 

　　　　由于img是浮动的元素，因此p里面的文字会被影响而环绕着图片。

　　　　若是咱们不想文字环绕图片，只想文字和图片分两栏显示，这时候就能够用到BFC的特性了。

　　　　

　p{overflow: hidden;}

　　　　由于BFC的特性，BFC元素不会受外部元素的影响，不会影响外部元素，因此这里的p元素文字不会和img产生任何交集。 效果以下：

　　　　　　　　　　　　　　　　　　　

　　　　实际项目中，文字和图片之间确定要加一些距离，这个也很简单，给浮动的元素加margin-right或者padding-right就能够实现。

　　　　这里假如img和文字之间的间隔为10px ，就能够这样来处理：

        img{width:50px;height:50px;float:left;margin-right:10px;}
        p{overflow: hidden;}

　　　　效果以下：

　　　　　　　　

　　　　

 

　　那么这种布局有什么优势呢？

　　　　　　1，基于BFC的这种自适应布局，由于他是出于BFC所在的封闭环境，因此更加健壮，容错性更强。

　　　　　　2，右边的文字会自动填满除浮动图片以外的全部区域，能够不用关心浮动元素的宽度。因此说是能够通用的。

　　　　　　　　能够抽象几个class名称

　　　　　　　　

.fl{float:left;}
.fr{float:right;}
.bfcHidden{overflow:hidden;}

　　　　　　　项目中遇到这种需求的时候，直接使用上面的类名就能够完成基本的布局。

 

　　这种布局的缺点

　　　　咱们能够看到上面写的触发BFC的几个条件，好比float，position，overflow等等，这些属性自身都有一些古怪的特性，这里拿出几个有表明的说明一下。

　　　　　   1，float：left

　　　　　　　　float元素有破坏性和包裹性，失去了元素的自适应性，因此没法来实现自动填满的自适应布局。

　　　　　　2，position：absolute

　　　　　　　　absolute脱离文档了，和非定位元素无法一块儿。

　　　　　　3，overflow：hidden

　　　　　　　　这个仍是很好的，基本没有什么太大的问题。 惟一的问题是超出容器的会被隐藏掉。

　　　　　　4，display：inline-block

　　　　　　　　会让元素有包裹性。

　　　　　　5，display：table-cell

　　　　　　　　让元素表现像单元格同样。 它有一个神奇的特性，就是宽度设置的再大，也不会超过表格容器的宽度。因此在这里咱们能够把设置了table-cell的这个元素宽度设置大一些，好比9999px，这样的话就很好了，比overflow：hidden的使用更为普遍。

　　　　　　

　　最后： 

　　　　关于display：table-cell 的连续英文字符没法换行的问题，能够用以下css解决：

　　　　

.tableCell-break{
   display:table;
   width:100%;
   table-layout: fixed;
   word-break: break-all;
}