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的规则浮动的元素不会重叠,从而形成浮动流,超过父元素宽度就会折行。
- 栅格布局:float+百分比
-
-
清除浮动带来的影响:父元素高度塌陷
- 通常说的清除浮动其实是清除浮动带来的破坏,即父元素高度塌陷。
- 根据BFC的定义,BFC会隔离内部元素,所以BFC内部的浮动不会影响外部。
-
例子
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底边缘。
前端学习
记录自己的前端学习历程
830 声望
46 粉丝
推荐阅读
上海招聘前端开发
【内推】前端开发工程师(3-5年)公司:上海亿锦网络科技职位描述资深Web前端工程师职位描述:负责参与项目的需求评审、开发以及技术攻坚。负责持续优化前端体验、页面响应速度等。负责前沿技术的预研、讨论并最终...
t现在是冬天t阅读 4
还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库
XboxYan赞 34阅读 2.3k评论 2
CSS 如何设置自动滚动定位的“安全”间距?
欢迎关注我的公众号:前端侦探介绍两个和滚动定位相关的 CSS 属性:scroll-padding和 scroll-margin在平时开发中,经常会碰到需要快速定位的问题,比如常见的锚点定位 {代码...} 这样,在点击a标签时会自动定位到...
XboxYan赞 30阅读 2.3k评论 2
CSS transition 小技巧!如何保留 hover 的状态?
欢迎关注我的公众号:前端侦探通常情况下,hover 是无法保存状态的。鼠标移入触发额外样式,一旦移出就还原了 {代码...} 这就意味着,如果需要保留hover的状态,可能就不得不借助JS了,比如下面是某某书院的首页...
XboxYan赞 29阅读 3.6k评论 2
现代 CSS 之高阶图片渐隐消失术
在过往,我们想要实现一个图片的渐隐消失。最常见的莫过于整体透明度的变化,像是这样: {代码...} {代码...} 但是,CSS 的功能如此强大的今天。我们可以利用 CSS 实现的渐隐效果已经不再是如此的简单。想想看,...
chokcoco赞 25阅读 2.1k
除了 filter 还有什么置灰网站的方式?
大家都知道,当一些重大事件发生的时候,我们的网站,可能需要置灰,像是这样:当然,通常而言,全站置灰是非常简单的事情,大部分前端同学都知道,仅仅需要使用一行 CSS,就能实现全站置灰的方式。像是这样,我...
chokcoco赞 19阅读 1.7k评论 1
万能的CSS 渐变!单标签绘制一个足球场
一眼望去,这里的形状只有圆形和矩形,在不借助其他标签的情况下(包括伪元素),其实很容易联想到渐变,一起看看如何绘制的吧,有非常多的渐变小技巧~
XboxYan赞 18阅读 1.9k评论 8
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。