在解决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):将图片浮动