解决高度塌陷、外边距合并---BFC的概念

可能在初学前端的同窗，会有如下疑惑:   (没错,那同窗就是我)

一、为何在浮动元素的父元素上添加overflow:hidden，能处理高度塌陷？

二、遇到外边距合并，为何要在父元素上添加overflow:hidden能解决？

首先来了解下------什么是BFC吧！

一、按个人理解，BFC是一个大的隔离独立盒子，拥有BFC特性的盒子、子元素不会影响盒子外面布局，也就是说BFC特性能处理外边距合并问题。

二、BFC特性会检测子元素内部浮动、定位盒子的高度，也就是说把普通盒子加上BFC特性，能处理父元素不设置高度、浮动致使的高度塌陷问题。

那么应该怎么让盒子拥有BFC特性呢？给盒子添加如下其一属性：

• 浮动元素：float 除 none 之外的值
• 绝对定位元素：position (absolute、fixed)
• display ：inline-block、table-cells、flex
• overflow 除了 visible 之外的值 (hidden、auto、scroll)

-------------------------------------------------------------------------------------

这也就验证了开始的问题。。原来BFC特性受益者是他的子元素啊，怪不得要把 overflow:hidden 加在父元素身上了！

码字不易，点个赞再走呗！