CSS BFC和CSS hack

简述CSS BFC和CSS hack

BFC

BFC定义:
浮动元素和绝对定位元素,非块级盒子的块级容器(例如inline-blocks,table-cells,和table-captions),以及overflow值不为‘visiable’的块级盒子,都会为它们的内容创建新的BFC(块级格式上下文)

给元素增加overflow:hidden生成BFC BFC作用
  1. 设置浮动使元素脱离正常文档里,生成BFC,与normal状态下的元素互不影响,由此形成自适应两栏布局。
  2. 防止垂直方向上的margin合并:
    设置了绝对定位的p生成了一个BFC,与其他两个p不属于同一个BFC,不会发生margin合并。

CSS hack

由于不同的浏览器,甚至同一浏览器的不同版本对CSS的解析认识不一样,导致生成的页面效果不一致,写出针对不同浏览器CSS code就称为CSS hack。
常用的CSS hack 有三种方式,CSS 内部hack、选择器hack、HTML 头部引用,其中第一种最常用。
以下网站查看css标签兼容情况
http://caniuse.com/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,786评论 1 92
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 1,204评论 0 1
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,598评论 32 459
  • 一、BFC是什么? 它是 Block Formatting Context (块级格式化上下文) 的简称,接下来通...
    07120665a058阅读 3,814评论 15 40
  • FaceParty 是一款极简风格的动态拼图应用,相比较之前小美推荐的 Alive,FaceParty 更加纯粹只...
    最美应用阅读 566评论 0 2