CSS--BFC(块级格式化上下文)
2017-05-04 16:35
561 查看
BFC是什么?Block formatting contexts
参看w3.org上说的
Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). The following values of the ‘display’ property make an element block-level: ‘block’, ‘list-item’, and ‘table’.
Block-level boxes are boxes that participate in a block formatting context. Each block-level element generates a principal block-level box that contains descendant boxes and generated content and is also the box involved in any positioning scheme
大概的意思是块级元素是那种源文档被格式化为可视块了的元素,然后使这个元素变成块级元素的display属性取值如下: ‘block’, ‘list-item’, 和 ‘table’。
块级盒block-level box是这种参与了块级排版上下文的一种盒子,每个块级元素都生成了一个包含后代盒子和生成的内容的主要块级盒,并且这个盒子参与了任何定位的计算
BFC的一般理解:
BFC是一个独立的布局环境,在这个环境里面物品的摆放是不受外界的影响的。转换为BFC的理解则是:BFC中的元素的布局是不受外界的影响(可以利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。),在一个BFC中,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直的沿着其父元素的边框排列。
BFC的触发条件
满足下列条件之一就可触发BFC根元素,即HTML元素
float的值不为none
overflow的值不为visible
display的值为inline-block、table-cell、table-caption
position的值为absolute或fixed
BFC的布局规则
内部的Box会在垂直方向,一个接一个地放置。Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如 此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时,浮动元素也参与计算
BFC用途
1. 自适应两栏布局
body { width: 300px; position: relative; } .aside { width: 100px; height: 150px; float: left; background: #f66; } .main { height: 200px; background: #fcc; overflow: hidden; } <body> <div class="aside"></div> <div class="main"></div> </body>
2. 防止垂直 margin 重叠
<style> .wrap { overflow: hidden; } p { color: #f55; background: #fcc; width: 200px; line-height: 100px; text-align: center; margin: 100px; } </style> <body> <p>Haha</p> <div class="wrap">//在p外面包裹一层容器,并触发该容器生成一个BFC。那么两 个P便不属于同一个BFC,就不会发生margin重叠了。 <p>Hehe</p> </div> </body>
3. 清除内部浮动
如下图,往往我们需要实现下右图的效果<div class="container"> <div class="floated">Floated div</div> <p>巴拉巴拉---.</p> </div>
在BFC中,每个盒子的左外边框紧挨着左边框的包含块(从右到左的格式化时,则为右边框紧挨)。即使在浮动里也是这样的(尽管一个盒子的边框会因为浮动而萎缩),除非这个盒子的内部创建了一个新的BFC(这种情况下,由于浮动,盒子本身将会变得更窄),
根据这些,如果这个 p 元素创建了一个新的BFC,那么它将不会紧挨着容器块的左边缘。这个方法创建了一个新的BFC解决了文字环绕在浮动元素周围的问题。
p{ overflow: hidden; }
有时我们还会遇到塌陷的问题,如
我们要实现的是
在这里简单设置父级元素
<div class="p" style="float:left;"> <div class="c">1</div> <div class="c">2</div> <div class="c">3</div> </div>
可以得到结果,这里边框的长度也变小了
除了设置BFC来消除浮动外,还有clear属性
相关文章推荐
- 关于对CSS中BFC (块级格式化上下文) 的理解
- CSS BFC(块级格式化上下文)
- css中margin重叠和一些相关概念(包含块containing block、块级格式化上下文BFC、不可替换元素 non-replaced element、匿名盒Anonymous boxes )
- CSS之BFC(块级格式化上下文)
- 【CSS】浅谈css中格式化上下文BFC、IFC(二)
- BFC环境(block formatting context块级格式化上下文)
- CSS--理解块级格式上下文(BFC)
- BFC(块级格式化上下文)
- 理解CSS中的块级格式化上下文转载于(https://segmentfault.com/a/1190000003068557#articleHeader6)
- BFC(Box,Formatting,Context) —— 块级格式化上下文
- css之BFC(block formmatting context)[格式化上下文]
- BFC(块级格式化上下文)
- BFC-块级格式化上下文
- CSS的两种格式化上下文:BFC和IFC
- CSS2系列:BFC(块级格式化上下文)IFC(行级格式化上下文)
- BFC(Block formatting context)直译为"块级格式化上下文"
- BFC(块级格式化上下文)
- CSS概念之常规流( 块级格式化上下文/行内格式化上下文/行框/相对定位)
- BFC(块级格式化上下文)
- BFC:块级格式化上下文