常见的cssbug +产生bug的原因 +bug详细解决

在解决cssbug前需要先了解什么是BFC？BFC文档流与普通文档流的区别？
BFC:中文的意思是块级格式上下文 ，他是一个独立的渲染区域，他规定了内部的元素如何布局，而且这个区域与外部的元素毫不相干。

普通文档流布局规则

1.浮动的元素是不会被父级计算高度的（列入高度自适应布局中高度塌陷bug）
2.非浮动元素会覆盖浮动元素的位置（兄弟关系的元素）
3.给子级添加margin-top 会传递给父级
4.两个相邻元素上下margin会重叠

BFC的布局规则

1.浮动的元素会被父级计算高度
2.非浮动的元素不会覆盖浮动元素的位置
3.margin-top不会传递给父级
4.两个相邻元素上下margin不会重叠

看到这里 我们会发现如果将某一部分文档流转换为BFC布局规则那么有些bug 就可以得到解决了

触发BFC的方式

1.float的值不为none
2.overflow的值不为visible
3.display的值为table-cell，table-caption和inline-block的值之一
4.position的值不为static（absolute relative sticky(黏性定位一般很少用很多人容易忘记)）

常见的BUG以及解决办法

1.最常遇到的高度自适应布局中高度塌陷问题

::after{
content="";
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}
：after{
zoom：1
}

目前高度塌陷的最优解（大部分公司采用这种方法） 但是代码过长 使用建议建立公共类减少代码冗余 zoom：1 部分是为了兼容ie6 兼容性问题在我的另一篇文章会有详细的介绍

2.表单元素距离顶部间距不一致）
注意：input的默认边框的宽度时2px
解决办法： 给表单元素统一浮动（float）
3.给子级设置margin-top会传递给父亲
解决办法：
1）.给父级或者子级添加浮动
2）.给父级添加溢出属性（不建议父级中要是还有定位的元素会有影响）
3）.给父级添加边框 （普通盒模型中要注意边框会增大父级的宽度要减去边框的宽度）
4.图片横着排列的时候中间会有间隙
解决办法：
1）：图片代码写在一行上（可读性差不推荐）
2）：将图片浮动