什么是BFC?相信有一部分人面试时应该会被面试官问过吧,没了解过的人估计一脸懵逼。其实这是一个很简单的东西,面试官也是想考察你知识面是否广泛。
全称块级格式化上下文?什么意思不懂。看了好多博客,基本都是抄的,真心都不是大白话。我今天来总结一下,用菜鸟级别的语言来描述。
BFC 应该可以抽象成一个 独立的个体,出淤泥而不染的白莲花。
是的不受其他元素的影响,始终保持自己独立。就是正常的普通流布局规则,设置的样式是什么样的,就按正常的普通流布局的表现。
内部的子元素 不受外界的影响,外界的元素,也不受内部的元素的影响。各自独立生活在html这片空间下。
BFC触发条件:
【1】根元素,即HTML元素
【2】float的值不为none
【3】overflow的值不为visible
【4】display的值为inline-block、table-cell、table-caption
【5】position的值为absolute或fixed
BFC布局规则:
1.内部的Box会在垂直方向,一个接一个地放置(不设置浮动,设置浮动那肯定是 左右一行排列了)。
2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠(正常的不设置浮动,两个块元素margin重叠,仅仅是垂直方向,左右不是这个样子的)
3.每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。(不设置浮动,不设置左边距,块级子元素,一律靠左竖直向下排列,内联子元素一律从左向右排列,想想,正常写代码,都是这样,设置左浮动的靠近父元素的左边,设置右浮动,靠近父元素的右边。)
4.BFC的区域不会与float box重叠。BFC区域的子元素不受外面的影响,外面的也不受BFC区域里面的影响(这个挺重要的,设置的浮动的元素,脱离了文档流,正常的相邻的元素会跑到它下面(靠左)。设置成BFC,自己独成一块,不会跑到它下面,而是保持洁身自好,自己依然占一块。)
6.计算BFC的高度时,浮动元素也参与计算(就是子元素设置浮动,脱离文档流,父元素高度塌陷,给父元素设置BFC,那么父元素高度就不会忽略浮动的子元素,从而高度就不会塌陷,这样理解,好像是BFC又把脱离文档流的元素,又拉回来了,但保持了浮动的特点。)
作用:???
哎呀,成天写页面,其实经常用到,但是可能不知道这个就是BFC的知识。
比如:
两栏布局、清除浮动用overflow:hidden;等说实话,布局,有很多办法,但是,清除这些东西,能更好的来写DOM和CSS还是要好好理解理解的,之前都是瞎几把布局。虽然效果也能出来,但是写了很多不必要的代码吧。