css盒模型 BFC 总结

盒模型 BFC 总结

• 盒模型由 margi border padding content -盒模型有标准模型与 IE 模型两种类型 -标准模型的 width,height 就是 content 的 width,height
• IE 模型的 width,height 就是 content+padding+border 的 width,height -两者之间转换通过 box-sizing:content-box||border-box

BFC

• 🤔BFC 是什么？
  块级格式化上下文

• 🤔BFC 的原理？
  float 布局不会依赖，即 bfc 不会与 float 重叠
  外部与内部之间互不影响
  垂直方向 margin 重叠取较大值
  计算 BFC 的高度，float 也参与计算

• 🤔BFC 能解决的问题？
  margin 垂直重叠问题
  元素侵占剩余空间
  解决浮动元素导致父级元素的 height 为 0

• 🤔BFC 创建方式？
  float 不为 null
  overflow 不为 visible
  postion 不为 static relative
  display: table 类似元素

经典语句

每天多学习一点，你就比别人多知道一点。