CSS的BFC详解

大家在刚开始练习css的时候一定会碰到一种情况：明明我想设置子元素的外边距让子元素里父元素的边界远一点，但是结果却不如人意。明明设置的是子元素的外边距，结果却是父元素的外边距增加了。这个就是父子元素的外边距重叠的问题，那么解决这个问题我们就需要开启BFC了。

什么是BFC：

        BFC是即 Block Formatting Contexts (块级格式化上下文)，开启了BFC的元素和它的子元素之间相当于是相互独立的容器，对彼此的操作都不会影响到其他的元素。

如何开启：

        1.浮动，2.overflow除了visibility以外的其他值，3.定位。4.display：inline-block，flex，table-cells，这是比较常用的方式，开启之后就可以轻松解决上述问题啦！

以下为实例：

开启bfc之前        

开启bfc之后

 

新手前端小白，分享一些拙见，希望大家多多支持