1、什么时候会出现BFC?
- 浮动元素 float:left;
- 表格元素:display:table;
- 绝对定位元素:display:absolute/fixed
- 行内元素:display:inline-block;
- overflow不为visible的值 overflow:hidden/scroll
BFC的作用
BFC的作用大着呢,BFC元素特性表现原则就是,内部子元素再怎么翻江倒海,翻云覆雨都不会影响外部的元素。所以,避免margin穿透啊,清除浮动什么的也好理解了。
1.避免margin重叠
css
.container {
background-color: red;
/*overflow: hidden;*/
/* creates a block formatting context */
}
p {
background-color: lightgreen;
margin: 10px 0;
}
html
<div class="container">
<p>Sibling 1</p>
<p>Sibling 2</p>
<p>Sibling 3</p>
</div>
这里虽然设置了margin:10px,但是发现上下元素的margin重叠了
如图所示,本来想的是间距应该是20px,但是只有10px了。
这里就需要用一个bfc就能解决问题
<div class="container">
<p>Sibling 1</p>
<p>Sibling 2</p>
<div class="bfc">
<p>Sibling 3</p>
</div>
</div>
.bfc {
overflow: hidden;
}
看最后一个元素加了bfc,就有效果了。
解决父元素塌陷问题
<div class="container">
<div>Sibling</div>
<div>Sibling</div>
</div>
.container {
background-color: green;
}
.container div {
float: left;
background-color: lightgreen;
margin: 10px;
}
看这段代码,我们在container内部实现了一个float,其实这两个div就是一个BFC了;
所以我的理解就是它脱离了container这个盒子,但是container这个盒子的高度需要靠里面的内容来撑,所以现在它里面都木有内容了,因此也就塌陷了….
如果不加float,(当然这两个元素也不会并列),这个时候container和这两个div在同一个BFC中(根元素BFC)
BFC导致的问题由BFC来解决
给container也加一个BFC;
.container {
background-color: green;
overflow: hidden;
}
效果立现:
这里我有一点想不明白:既然container是一个BFC,里面的div是另一个BFC吗?还是在同一个BFC中了?
3.解决文本环绕问题
.container {
width: 500px;
min-height: 280px;
border: 1px solid #aaa;
padding: 10px;
}
.floated {
float: left;
}
</style>
</head>
<body>
<!--bfc的创建-->
<div class="container">
<div class="floated">
<img src="../img/01.png" alt="图像">
</div>
<p>In a block formatting context, each box’s left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box’s line boxes may shrink dueto
the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).
</p>
</div>
</body>
就像这样文本会围绕图片。
这里图片还是设置了一个float:left 然后这个文本就会围绕这个图片来布局。。。
因为p是流动的,我们可以认为它找到一点位置就把它填满;
给p弄成一个BFC,就可以解决问题了
p {
overflow: hidden
}
原文参见 https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/