zoukankan      html  css  js  c++  java
  • BFC的特性及使用场景

    BFC(Block Formatting Context)块级格式化上下文,是Web页面 CSS 视觉渲染的一部分,用于决定块盒子的布局及浮动相互影响范围的一个区域。

    BFC的特性

      1. 属于同一个BFC的两个相邻Box的margin会发生折叠,不同BFC不会发生折叠

      2. BFC的区域不会与浮动元素的区域重叠

      3. BFC的高度包含浮动子元素的高度

      4. BFC在页面上是一个独立的容器,里外的元素不会互相影响

      5. 每个元素的左外边距与包含块的左边界相接触(从左向右),即使浮动元素也是如此。(这说明BFC中子元素不会超出他的包含块,而position为absolute的元素可以超出他的包含块边界)

    创建BFC

      1. float值不为none

      2. position的值不是static或raletive

      3. display属性 为table table-cell...

      4. overflow: auto hidden scroll (不为visible)

    BFC使用场景:

      1. 去除边距重叠现象

      2. 清除浮动(让父元素的高度包含子浮动元素)

      3. 避免某元素被浮动元素覆盖

      4. 避免多列布局由于宽度计算四舍五入而自动换行

  • 相关阅读:
    关于前端输入框的限制和有效值
    js,jquery转json的几种方法
    java,js,jstl,EL的简单交互
    mysql字段冲突报错
    js的一些压缩和优化性能
    一个不错的html素材网站
    redis之数据操作详解
    redis之持久化操作
    redis之django-redis
    redis知识总汇
  • 原文地址:https://www.cnblogs.com/YiNongLee/p/9366468.html
Copyright © 2011-2022 走看看