有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

什么是BFC?BFC布局规则、触发条件、应用场景

代码编程 cat 12个月前 (10-22) 44次浏览 已收录 0个评论 扫描二维码
 什么是BFC
                Block 块
                Formatting 格式化
                Context    上下文
                直译为块级格式化上下文,是CSS规则里【独立的渲染区域】有自己的渲染规则,只有块状的盒子参与
生成BFC的条件:
                根元素本身
                float:left,right
                position:fixed,absolute
                overflow:hidden\scroll\auto  
                display:inline-block,table-caption,table-cell、flex....
 BFC渲染规则:
            隔离的独立容器 (结界)
            【封闭性】
                1.不会出现margin值塌陷问题
                2.包含浮动子元素不会出现高度塌陷
                3.不与浮动元素重叠
作用(帮我们解决了什么问题)?
                1.清浮动
                2.margin值塌陷问题
                3.创建两列布局(BFC区域不与浮动元素重叠)
          应用: 父元素overflow可以解决margin值塌陷,浮动问题
          原理: 生成BFC改变了它的渲染规则--- 所以margin值塌陷问题、浮动问题
喜欢 (0)
cat
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址