Jason zeng practice

CSS

1. 介绍BFC及其应用

BFC的全称是block format context, 块级格式化上下文,简单点就是结界,如果一个元素具有了BFC功能了,内部元素不管怎么翻江倒海都不能影响外部,所以什么浮动导致高度塌陷, margin重叠等问题都不会出现
触发BFC的条件:

  1. <html>的根元素
  2. float不为none的元素
  3. overflow 为 hidden, auto ,scroll的值
  4. position不为releative和static的定位
  5. display为table-cell,table-caption和inline-block,flex、inline-flex的一种
    BFC作用
  6. 清楚浮动,因为被BFC包裹的元素是结界,自然浮动不能对外部产生影响
  7. 同一BFC元素间的外边距margin重叠的问题
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容