1.BFC 是什么？

Block Formatting Contexts 块级格式化上下文。(不懂？没关系，后文有介绍。)

2.为什么需要BFC？

在传统布局中出现的问题需要一种统一的解决方案。

首先铺垫一波：

传统布局：

2.1普通流布局(normal flow)

2.1.1 内联元素水平排列

2.1.2 块级元素开启新的一行

2.2浮动流布局(float)

2.2.1 浮动元素脱离普通流布局，且向右或向左偏移，

2.2.2 与报纸的文本环绕图片类似

2.3 绝对定位布局(absolute positioning)

2.3.1 脱离普通流的层

2.3.2 绝对定位元素不会对其兄弟元素的位置造成影响

2.3.3 绝对定位元素的位置由绝对定位的坐标决定

3.如何使用BFC？

3.1 、body根元素具备BFC特性

3.2 、浮动元素(float: left|right)

3.3 、绝对定位元素(position: absolute|fixed)

3.4 、display： inline-block|table-cells|flex

3.5 、overflow: hidden|auto|scroll

在传统布局中都会出现哪些问题，如何使用BFC 来解决问题的呢？

1、margin合并问题：

问题描述：第一个盒子的下边距和第二个盒子的上边距发生重叠

解决方法：将两个盒子分别放在用overflow:hidden触发BFC的盒子内

2.、浮动流造成的父级元素高度坍塌问题

问题描述：子元素由于浮动设置导致父元素无法识别其高度而产生的高度坍塌问题

解决方案： clear: both清除浮动

或是父级容器触发BFC；

3.margin 塌陷的问题

问题描述：子元素设置margin-top后，父子同时设置了向上的外边距

BFC 的解决方案，在父级触发BFC；

4、浮动元素覆盖问题

问题描述：第一个元素是浮动元素，第二个元素不是浮动元素，这时浮动元素会覆盖非浮动元素

BFC 的解决办法：第二个元素触发BFC

细心的同学肯定能察觉出来， BFC 的触发方式并不是唯一的的，在不同的场景下，我们会选择不同的触发BFC 的方式，来解决上述的问题；

欢迎大家积极讨论，如果大家喜欢可以关注我们JS++前端教育，原创不易……

如何获取元素在父级div里的位置_前端面试题--元素的BFC特性和实例相关推荐

如何获取元素在父级div里的位置_关于元素的浮动你了解多少
首先,在介绍什么是浮动之前我们先介绍一下html中元素的普通流布局方式.在普通流中,元素是按照它在 HTML 中的出现的先后顺序自上而下依次排列布局的,在排列过程中所有的行内元素水平排列,直到当行被占 ...
9 Jquery 获取子孙或父级元素
9 Jquery 获取子孙或父级元素 children 查找直接的子元素,不会跨层级 parent 查找直接父元素 parents 查找所有父级元素 find查找所有的元素,会一直查找,跨层级查找一 ...
在vue中使用echarts根据父级div大小自动适应大小
首先,你需要在组件中引入 ECharts.然后,你可以在组件的 mounted 钩子函数中初始化 ECharts 实例,并在组件的 template 中渲染 ECharts. 在 mounted 钩子 ...
CSS - table超出父级div
用到div包裹table的布局,想要的效果是table的宽度等于div宽度,超出内容省略号显示. 听起来很简单啊,设置table宽度为100%,省略号三行代码往上一粘,心想着大功告成. but!!!! ...
解决子级用css float浮动而父级div没高度不能自适应高度
当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个是由于浮动产生原因. 方法一:对父级设置固定高度此方法可用于能确定父级div内子级对象高度. 缺点: 父级是固定高度,而不随 ...
父级div没高度不能自适应高度的原因——子级使用css float浮动
好久没写博客了,最近捡起前端代码开始码,一些基本的东西都忘记了,觉得自己停滞不前的原因就是没做好巩固--废话我们常常在做盒子嵌套的时候,最外层盒子不想给他设置高度,因为我们填充的内容不确定有多大,一 ...
浮动元素将父级高度撑开
撑开父级 <div class="parent"><div class="child"></div> </div> ...
jquery获取元素（父级的兄弟元素的子元素）
一.获取父级元素使用jquery获取父级元素: parent() 例如:$(this).parent('ul'); 二.获取同级元素使用jquery获取同级元素:siblings() 例如:$(t ...
jQuery——给元素添加父级的方法
.wrap() 作用:在每个匹配的元素外层包上一个html元素 [例]给两个span标签分别添加父级方法一:传标签 <!DOCTYPE html> <html lang=" ...

如何获取元素在父级div里的位置_前端面试题--元素的BFC特性和实例

1.BFC 是什么？

2.为什么需要BFC？

3.如何使用BFC？

如何获取元素在父级div里的位置_前端面试题--元素的BFC特性和实例相关推荐

最新文章

热门文章