一起深入理解BFC~

BFC是什么！听起来好高端……

Everybody 大家好，BFC在布局中的作用很大，而且也是经常会用到的。so，让我们一起来深入了解一下BFC吧~

首先要举个栗子~

HTML代码

CSS代码

效果~

这里的p标签并没有添加样式，但如果这样

看看效果

红色没了？？？div不见了？

一定是浮动惹的祸！

没错，我们来说说浮动在这里干了什么坏事！

作为子元素的p标签因为添加了浮动便导致了父元素的塌陷！原来float这么坏！

让我们想想浮动还有什么罪行！

1、导致父元素的背景图不能显示！

2、父元素边框撑不开！

3、父子级间的padding、margin不能正确展现！

儿子上天了爸爸还能管不了！当然有办法治！于是就有了清除浮动

与其说是清除浮动，不如说是解决浮动出现的问题。so我们来看看父亲治理儿子上天的若干种办法~

1、父元素中添加  overflow：hidden；                                     你不是上天了吗，爸爸限制着你~（父级紧贴内容）

2、父元素中添加 float：；                                                         爸爸带你一起飞……

3、父元素中添加 position：absolute  / fixed；                       让父元素也脱离文档流

4、父元素中添加 display：inline-block / table / table-cell；  包起来

5、兄弟元素中添加 clear：both；                                             找个人来管管你

诶诶诶，我们不是来了解BFC呢，怎么对付开浮动了！

其实以上解决办法都触发了BFC。

ok，引入定理：

什么是BFC？

块级格式化上下文（Block formatting context）是CSS对于一个页面进行可视化渲染时产生的区域，在这个区域中会产生被渲染的盒子模型、以及相互影响的浮动元素。

简单来说，就是BFC就是一种属性，只有块级元素参与，影响着元素的定位，以及兄弟元素之间的相互影响。

嗯，恍然大悟。

不过值得一提的是以上几种触发BFC的效果并不相同，在使用时也要结合实际需求。

嘻嘻，我弄明白了，你呢？