微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

[css] 简述你对BFC规范的理解

[css] 简述你对BFC规范的理解


    是CSS中的一个渲染机制,BFC就相当于一个盒子,内部的元素与外界的元素互不干扰。它不会影响外部的布局,外部的布局也不会影响到它。

形成条件(任意一条)

    float的值不是none
    position 的值不是static或者relative
    display的值是inline-block,table-cell,flex,table-caption或者inline-flex
    overflow的值不是visible

特性

    内部的盒子会在垂直方向上一个一个的放置
    对于同一个BFC的俩个相邻的盒子的margin会发生重叠,与方向无关。
    每个元素的左外边距与包含块的左边界相接触(从左到右),即使浮动元素也是如此
    BFC的区域不会与float的元素区域重叠
    计算BFC的高度时,浮动子元素也参与计算
    BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然

个人简介

我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐