今天完成的事情：

今天把任务14的代码优化了一下

 BFC是什么？

BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。听着很高大上，其实简单的来说，就是这么一句话：BFC元素特性表现原则就是，内部子元素再怎么翻江倒海，都不会影响外部的元素。使每个盒子独立于其他。

什么时候会触发BFC？

（1）float，值不为none 

（2）overflow，当它的值为auto，scroll，或hidden 

（3）display的值为table-cell，table-caption，inline-block 

（4）position的值为absolute或fixed

（3）常见问题：

    (1)高度塌陷问题  DEMO-高度塌陷

我们在布局中可能会遇到下面这种情况，一个父级大盒子，包着三个小盒子，然后给小盒子添加浮动后，大盒子就消失了 一般我们遇到这种情况会考虑到清除浮动

    (2)文字环绕  DEMO-环绕

来看下面这个demo-2，文字环绕在图片边，但是如果文字内容太多了，超过了图片的高度，它就会跑到图片的下面，这样非常影响美观和整体性

这里有一个细节，如果我们想让图片和文字之间留一个间距，有人可能会让旁边的文字加一个margin-left，但是发现不管用！

但是这并不是最佳方案，我们其实可以很简单的给图片加一个margin-right，或者给文字加一padding-left就能解决， 这就是BFC盒子与浮动元素并排的表现

 （3)margin重叠的问题 DEMO-重叠

在一些垂直的布局里，上下和盒子的margin值会重叠

  (4)总结一下BFC大家族的“顶梁柱”

    1.overflow: auto/hidden 

    2.display:inline-block 

    3.display:table-cell 

明天计划的事情：明天计划开始准备小课堂，并开始了解JS的相关知识
遇到的问题：BFC是什么

BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。听着很高大上，其实简单的来说，就是这么一句话：BFC元素特性表现原则就是，内部子元素再怎么翻江倒海，都不会影响外部的元素。使每个盒子独立于其他。

收获：简单了解了BFC