BFC及其背后的 float absolute inline-block

BFC及其背后的 float absolute inline-block

此文为经验之谈,感谢张鑫旭大佬

张鑫旭的博客

BFC(Block formatting context)

   BFC(Block formatting context)直译为"块级格式化上下文"。
   它是一个独立的渲染区域,只有Block-level box参与, 
   它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。

BFC布局规则:

  • 内部的Box会在垂直方向,一个接一个地放置
  • 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。inline float)(浮动流)
  • BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
  • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

  • BFC的区域不会与float box重叠(absolute 与float会重叠)

  • 计算BFC的高度时,浮动元素也参与计算

    • 解决父元素高度塌陷 float

3.怎样触发BFC

  • 根元素
  • float属性不为none
  • position为absolute或fixed
  • display为inline-block, table-cell, table-caption, flex, inline-flex
  • overflow不为visible

float

  • 最初的目的:

    • 是为了实现 文字环绕效果。
    • 虽然与 absolute 一样会脱离文档流,但是当清除浮动时候可以撑开父元素高度。
  • 实现方式:

    • 破坏行框盒子从而导致父元素高度塌陷
  • 表现形式:

    • 宽度收缩至最小,和absolute,inline-block表现一致。
  • 现在的应用:

    • 根据BFC的规则浮动的元素不会重叠,从而形成浮动流,超过父元素宽度就会折行。

  • 清除浮动带来的影响:父元素高度塌陷

    • 通常说的清除浮动其实是清除浮动带来的破坏,即父元素高度塌陷。
    • 根据BFC的定义,BFC会隔离内部元素,所以BFC内部的浮动不会影响外部。
  • line.png
  • 例子

absolute,fixed

  • 脱离文档流使父元素高度塌陷,不可避免
  • 相对于第一个非static定位的父元素直至跟元素,形成查找链
  • transform 会截断向上查找链

    • 中间父元素有 transform属性的话就会基于这个定位。
  • 应用:

    • 不定宽高元素垂直水平居中

      • 实现原理 top,left的百分比相对于定位父元素,此时是左上角居中,
      • tranform:translate(-50%,-50%)的百分比相对于自身,在拉回自身一半。
  • 例子

inline-block

  • line-height 是行内元素占据的高度
  • 图片底部有空白

    • 原因 图片默认基线对齐,离底线尚有一定距离
    • 解决方案

      • line-height<height
      • font-size==0
  • 另 一个inline-block元素,如果里面有inline内联元素,或者overflow是visible,其基线就是元素里面最后一行内联元素的基线

否则该元素的基线就是其margin底边缘。

  • baseLine.jpg
  • 例子:

  • 原文地址 BFC及其背后的 float absolute inline-block
  • 另外我的博客地址 blog会经常分享 最近的学习内容,项目中遇到的问题及解决方案

前端学习
记录自己的前端学习历程
830 声望
46 粉丝
0 条评论
推荐阅读
上海招聘前端开发
【内推】前端开发工程师(3-5年)公司:上海亿锦网络科技职位描述资深Web前端工程师职位描述:负责参与项目的需求评审、开发以及技术攻坚。负责持续优化前端体验、页面响应速度等。负责前沿技术的预研、讨论并最终...

t现在是冬天t阅读 4

还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库

XboxYan34阅读 2.3k评论 2

封面图
CSS 如何设置自动滚动定位的“安全”间距?
欢迎关注我的公众号:前端侦探介绍两个和滚动定位相关的 CSS 属性:scroll-padding和 scroll-margin在平时开发中,经常会碰到需要快速定位的问题,比如常见的锚点定位 {代码...} 这样,在点击a标签时会自动定位到...

XboxYan30阅读 2.3k评论 2

封面图
CSS transition 小技巧!如何保留 hover 的状态?
欢迎关注我的公众号:前端侦探通常情况下,hover 是无法保存状态的。鼠标移入触发额外样式,一旦移出就还原了 {代码...} 这就意味着,如果需要保留hover的状态,可能就不得不借助JS了,比如下面是某某书院的首页...

XboxYan29阅读 3.6k评论 2

封面图
现代 CSS 之高阶图片渐隐消失术
在过往,我们想要实现一个图片的渐隐消失。最常见的莫过于整体透明度的变化,像是这样: {代码...} {代码...} 但是,CSS 的功能如此强大的今天。我们可以利用 CSS 实现的渐隐效果已经不再是如此的简单。想想看,...

chokcoco25阅读 2.1k

封面图
除了 filter 还有什么置灰网站的方式?
大家都知道,当一些重大事件发生的时候,我们的网站,可能需要置灰,像是这样:当然,通常而言,全站置灰是非常简单的事情,大部分前端同学都知道,仅仅需要使用一行 CSS,就能实现全站置灰的方式。像是这样,我...

chokcoco19阅读 1.7k评论 1

封面图
万能的CSS 渐变!单标签绘制一个足球场
一眼望去,这里的形状只有圆形和矩形,在不借助其他标签的情况下(包括伪元素),其实很容易联想到渐变,一起看看如何绘制的吧,有非常多的渐变小技巧~

XboxYan18阅读 1.9k评论 8

封面图
830 声望
46 粉丝
宣传栏