什么是BFC？如何应用？
- BFC:Block format context ,块级格式化上下文
- 一块独立渲染区域，内部元素的渲染不会影响边界以外的元素
比如说：任何的BFC元素，它里面无论如何渲染都不会影响外界的元素，这样的话，对我们界面的布局，界面的定位就有很大的好处，如果说内部的渲染对外部会有影响，就不好了。BFC有了这么一个好处，所以说，BFC是我们布局中特别常见的概念。
形成BFC的常见条件：
- float不是none 比如说：我们对元素设置了float,这样的话元素就形成了BFC
- position是absolute或fixed 这时候元素也形成了BFC
- overflow不是visible 比如说overflow等于hidden/ scroll/inherit/auto……
- display是flex inline-block等
常用前三个
BFC的常见应用：
- 清除浮动 (法一：clearfix；法二：BFC清除浮动)
核心代码演示
初始化：
<style>
.container{
background-color: #f1f1f1;
}
.left{
float: left;
}
</style>
</head>
<body>
<div class="container">
<img src="https://www.imooc.com/static/img/index/logo-recommended.png" class="left" style="margin-right:10px;" alt="">
<p>某一段文字...</p>
</div>
</body>
初始效果：
- 界面乱了，针对一个容器，里面有一个img和一段文字，但是因为img设置了float之后，它完全跑出了容器的范围之内，本来容器的高度为20.8px,但是图片进来之后并没有把容器撑高，而是跑出了容器之外，这就是我们所说的脱离文档流(对布局产生很大影响)；本来这段文字p左边有图片，但是效果显示它还是贯穿到最左边；这种情况该怎么解决呢？
就可以通过BFC来解决问题！！！
代码修改：
<style>
.container{
background-color: #f1f1f1;
}
.left{
float: left;
}
.bfc{
overflow: hidden; /*触发元素 BFC*/
}
</style>
</head>
<body>
<div class="container bfc">
<img src="https://www.imooc.com/static/img/index/logo-recommended.png" class="left" style="margin-right:10px;" alt="">
<p class="bfc">某一段文字...</p>
</div>
</body>
添加了bfc类:overflow:hidden;
可以看到效果，图片撑高了contain高度，再看下文字截图：
P段落未加BFC类前：
P段落加了BFC类后：
左侧有了一个图片之后，文字就不会再贯彻到左侧了，而是从图片最右侧开始算起这就是BFC的好处!
回顾BFC的核心用意：
- 独立渲染区域，内部的区域怎么渲染都不会影响外部，上面例子就通过一个容器有了一个很简单的体现，如果容器没有bfc,图片是会跑出去，脱离文档流，跑出容器控制范围之内，但是当容器加上bfc之后呢?图片即便是浮动了，也不会跑出去，也不会跑出容器的控制范围之内，而是把容器给撑大！符合预期情况。
PS：css overflow属性
定义和用法
overflow 属性规定当内容溢出元素框时发生的事情。
说明
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
140
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
