css 知识整理

BFC

BFC触发条件:

  • 根元素,即html
  • float的值不为none(默认)
  • position的值为absolute或fixed
  • overflow的值不为visible(默认)
  • display的值为inline-block、table-cell、table-caption

BFC特性:

  • 内部的Box会在垂直方向上一个接一个放置。
  • Box垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box的margin会发生重叠。
  • 每个元素的margin box 的左边,与包含块border box的左边相接触。
  • BFC的区域不会与float box重叠。(可用于清浮动)
  • BFC是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。
  • 计算BFC的高度时,浮动元素也会参与计算。
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 清除浮动 BFC清除浮动浮动的父级末尾插入块级元素清除浮动 BFC(Block Formatting Contex...
    SeaseeYoul阅读 208评论 0 0
  • 布局 1. 三列布局,左右侧栏固定300px,三列高度统一给定,中间自适应 此简单问题,答上三种及格,答上五种优秀...
    burningalive阅读 140评论 0 1
  • 盒模型(标准盒模型,ie盒模型) 盒子由四个部分(或称区域)组成,每个盒子有四个边界:内容边界 Content e...
    冫笙阅读 213评论 0 0
  • 目录概览: 深入理解HTML语义 让IE8支持HTML5语义化标签 视觉格式化模型 深入了解inline-bloc...
    Yuki_Uki阅读 936评论 0 3
  • 推荐指数: 6.0 书籍主旨关键词:特权、焦点、注意力、语言联想、情景联想 观点: 1.统计学现在叫数据分析,社会...
    Jenaral阅读 5,757评论 0 5