C/C++教程

BFC机制

本文主要是介绍BFC机制,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

什么是BFC

BFC - Block Formatting Context 是块级格式化上下文,它规定了每一个BFC区域只包括其子元素,不包括其子元素的子元素,每一个BFC区域都是独立隔绝的,互不影响!

实现

触发BFC的条件

·body根元素

·设置浮动,不包括none

·设置定位,absoulte或者fixed

·行内块显示模式,inline-block

·设置overflow,即hidden,auto,scroll

·表格单元格,table-cell

·弹性布局,flex

可解决的问题

 解决外边距的塌陷问题(垂直塌陷)

开发中,前端的布局手段,离不开外边距margin,那么,也会遇到一些问题,例如外边距的垂直塌陷问题。

 

 

 

通过以上的实例,我们会发现,代码给两个div盒子,都添加了四个方向的margin,讲道理,学过数学的都知道,100+100=200.可是,盒子之间的距离,现在却之后100px。这就是很典型的margin的塌陷,两段margin重叠到了一块,互相影响。那么,如何利用BFC,让这个问题得到解决呢。回忆下,上文说过,BFC,就是一个与世隔绝的独立区域,不会互相影响,那么,我们可以将这两个盒子,放到两个BFC区域中,即可解决这个问题。

 

 

 

 

利用BFC解决包含塌陷

当父子关系的盒子,给子元素添加margin-top,有可能会把父元素一起带跑。

BFC05

 

原本,正确的显示方式,应该是粉色盒子与红色盒子的顶部距离为50px,但是由于margin的塌陷问题,导致盒子内部的布局影响到了外部。这个时候,就可以触发BFC,将父盒子变成一个独立的区域,这样在BFC区域内部的任何操作,都不会影响到外部。

BFC06

 

 

 

 

 当浮动产生影响的时候,父元素失去高度,可以利用BFC来清除浮动的影响

BFC07


以上代码表示,一个没有设置高度的父盒子,包含着七个子元素。如果此时,所有的子元素都浮动的话。

BFC08


当所有的子元素都浮动了,这个时候,父盒子失去了原有的高度,这就是浮动的影响。这个时候,同样也可用BFC的机制,来清除浮动带来的影响。使用BFC,将所有的浮动元素包裹起来。

BFC09

BFC可以阻止标准流元素被浮动元素覆盖

BFC10

以上情况,红色盒子浮动,蓝色盒子时标准流,默认情况下,浮动元素覆盖了标准流元素。但是,如果将蓝色盒子的BFC触发,那么情况将有所变化。

BFC10

当蓝色盒子触发了BFC之后,浮动元素再也不能覆盖它了,而且还能利用这个特性,来实现蓝色盒子宽度根据红色盒子的宽度来做自动适应

 

5.总结

一个BFC区域只包含其子元素,不包括其子元素的子元素。

并不是所有的元素都能成为一块BFC区域,只有当这个元素满足条件的时候才会成为一块BFC区域。

不同的BFC区域之间是相互独立的,互不影响的。利用这个特性我们可以让不同BFC区域之间的布局不产生影响。

 

这篇关于BFC机制的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!