margin塌陷、合并问题及BFC解决

margin塌陷

父子元素之间垂直方向的margin会粘合到一起，取最大的那个值

解决方法	优缺点
给父级设置边框或内边距	不建议使用,会破坏布局
bfc块级格式化上下文

margin合并

两个兄弟元素之间垂直方向的margin发生合并为高度中的较大者

解决方法	优缺点
给它们添加一个父级然后给父级使用bfc	不推荐使用,会破坏HTML文档结构
改变其中一个外边距的值，使之达到想要的效果

BFC (块级格式化上下文)

具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

触发BFC：

触发方法	语法
给父级设置绝对定位	position: absolute
给父级设置行级块元素	display: inline-bolck
给父级设置设置浮动	float: left/right
给父级添加溢出隐藏	overflow: hidden

通过bfc解决margin塌陷问题时会出现新的问题，解决方法并不完美，只能针对需求选择方法

BFC的三个特性：

• 阻止外边距折叠
• 可以包含浮动的元素
• 可以阻止元素被浮动元素覆盖

BFC应用：

• 清除浮动
• 防止 margin 重叠
• 多栏布局的一种方式