请描述 BFC(Block Formatting Context) 及其如何工作
##1.背景介绍
我们常常说文档流的时候其实分为定位流、浮动流和普通流三种。其中普通流就是指BFC中的FC。FC是formatting context的首字母缩写,直译过来是格式化上下文,它是页面中的一块渲染区域,有一套渲染规则,决定了其子元素如何布局,以及和其他元素之间的关系和作用。常见的FC有BFC、IFC,还有GFC和FFC。BFC是block formatting context,也就是块级格式化上下文,是用于布局块级盒子的一块渲染区域。
##2.知识剖析
一:BFC 是什么
[BFC]是可视化CSS渲染网页的一部分,它是一个区域,块级布局,相互浮动在这个区域发生。
一个BFC块区域包含所有里面的元素,除子元素创建了新的BFC。(因为各个BFC是一个独立的区域,BFC之间相互不影响)
所以:由于html(根元素)是独立的BFC,在里面的浮动,块级布局等才会相互影响,若新创建BFC,则相邻BFC之间的浮动元素,或是其他元素将不会影响。如,相邻两个块级元素的外边距折叠的情况将不会发生。
二:触发条件
满足下列条件之一就可触发BFC
【1】根元素,即HTML元素
【2】float的值不为none
【3】overflow的值不为visible
【4】display的值为inline-block、table-cell、table-caption
【5】position的值为absolute或fixed
三:BFC的作用
包含浮动元素(清除浮动)BFC会根据子元素的情况自适高度,这个特性是对父元素使用overflow:hidden/auto/scroll、 float:left/right 样式可以闭合浮动的
不被浮动元素覆盖 浮动元素会无视兄弟元素的存在, 覆盖在兄弟元素的上面, 为该兄弟元素创建BFC 后可以阻止这种情况的出现
四:BFC规则
内部的Box会在垂直方向,一个接一个地放置。 就是我们平常div一行一行块级放置的样式。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。就是元素左margin和包含块左border接触,即使存在浮动也是如此。左浮动就是靠左,右浮动就是靠右,
BFC的区域不会与float box重叠。应用于两列布局
BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。上下margin不影响,浮动不覆盖
计算BFC的高度时,浮动元素也参与计算。如父元素高度塌陷,清除浮动。父元素高度由内部撑开,计算bfc高度,内部浮动的子元素也参加。
##3.常见问题
1.外边距折叠(Collapsing Margins)
2.让一个没有设置高度的容器包含浮动元素
3.阻止文字环绕
##4.解决方案
1.外边距折叠
外边距折叠有很多种情况,最简单的就是上下两个盒子,上面的设置了margin-bottom,下面的设置了margin-top,这时候总的外边距并不是两者相加,而是取最大的外边距作为总的外边距。(假设外边距的设置为正值)
下面的代码发生了外边距折叠。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距折叠</title>
</head>
<body>
<div class="container">
<p>盒子1</p>
<p>盒子2</p>
</div>
</body>
</html>
css
.container {
background-color: red;
width: 400px;
}
p {
font-size: 30px;
background: yellow;
margin: 100px 0;
}
下面的代码通过使用overflow: hidden;新创建一个BFC,从而实现阻止外边距折叠。
(overflow: hidden;本来的含义是:如果盒子的内容超出盒子,则这部分内容隐藏。)
<div class="container">
<p>盒子1</p>
<div class="bfc">
<p class="bfc">盒子2</p></div>
</div>
.bfc {
overflow: hidden;
}
发生了外边距折叠(上),使用BFC阻止外边距折叠(下)。
2.容器无高度包含浮动元素
无BFC,容器无高度包含浮动元素会发生如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>容器无高度包含浮动元素</title>
</head>
<body>
<div class="container">
<p>盒子1</p>
<p>盒子2</p>
</div>
</body>
</html>
css:
.container {
background-color: red;
width: 400px;
outline: 1px dashed red;
margin-top: 10px;
}
p {
font-size: 30px;
background: yellow;
margin: 100px;
float: left;
}
可以看到,由于浮动元素是脱离普通文档流的,所以.container盒子发生了塌陷,高度变为0。如何阻止这种情况发生呢,可以给上面的代码.container盒子添加了一条样式overflow: hidden;,解决了容器盒子塌陷的问题。
效果图如下:
3.阻止文字环绕
左图右文,文字环绕图片,效果图:
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>左图右文 - 文字环绕图片</title>
</head>
<body>
<div class="container">
<div class="pic">
<img src="OddEyes.jpg" alt="超天新龙 异色眼革命龙">
</div>
<div class="text">
超天新龙 异色眼革命龙 怪兽 效果 灵摆 特殊召唤 12 星 / ATK: ? / DEF: ? / 龙 / 光
←12 【灵摆】 12→
①:自己不是龙族怪兽不能灵摆召唤。这个效果不会被无效化。
②:以自己墓地1只龙族的融合·同调·超量怪兽为对象才能发动。这张卡破坏,那只怪兽特殊召唤。
【怪兽效果】
这张卡不能通常召唤。用从手卡的灵摆召唤或者把自己场上的龙族的融合·同调·超量怪兽各1只解放的场合才能特殊召唤。
①:把这张卡从手卡丢弃,支付500基本分才能发动。从卡组把1只8星以下的龙族灵摆怪兽加入手卡。
②:这张卡的攻击力·守备力上升对方基本分一半的数值。
③:1回合1次,把基本分支付一半才能发动。这张卡以外的双方的场上·墓地的卡全部回到持有者卡组。
</div>
</div>
</body>
</html>
css:
.container {
background-color: gainsboro;
width: 500px;
min-height: 400px;
padding: 10px
}
.pic {
float: left;
margin-right: 10px;
}
}
有时候我们不需要文字环绕,就想让文字老老实实待在右边。加入.text {
overflow: hidden;
}
效果如下:
##5.编码实战
见目录4
##6.扩展思考
为什么用overflow触发而不用其他的?
因为其他如float,positon等等会影响布局,达不到我们想要的效果
##7.参考文献
##8.更多讨论
1.什么是IE的haslayout?
hasLayout可以简单看作是IE5.5/6/7中的BFC(Block Formatting Context)。也就是一个元素要么自己对自身内容进行组织和尺寸计算(即可通过width/height来设置自身的宽高),要么由其containing block来组织和尺寸计算。而IFC(即没有拥有布局)而言,则是元素无法对自身内容进行组织和尺寸计算,而是由自身内容来决定其尺寸(即仅能通过line-height设置内容行距,通过行距来支撑元素的高度;也无法通过width设置元素宽度,仅能由内容来决定而已)
2.overflow的auto还是visible可以触发bfc?
auto,hidden,scroll可以触发
3.利用浮动再触发bfc用来干嘛?
用来实现左列定宽,右列自适应布局
感谢大家观看
By 要来点本子吗