A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from http://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_display/Block_formatting_context below:

åŒºå—æ ¼å¼åŒ–ä¸Šä¸‹æ–‡ - CSSï¼šå±‚å æ ·å¼è¡¨

BFC 使得让浮动内容和周围的内容等高。

为了更好的理解 BFC，我们先看看下面这些内容。

在下面的例子中，我们让 <div> 元素浮动，并给它应用 border 效果。<div> 里的内容现在已经在浮动元素周围浮动起来了。由于浮动的元素比它旁边的元素高，所以 <div> 的边框穿出了浮动。正如我们在应用或脱离流式布局指南中解释的，浮动脱离了文档流，所以 <div> 的 background 和 border 仅仅包含了内容，不包含浮动。

使用 overflow: auto

在创建包含浮动元素的 BFC 时，通常的做法是设置父元素 overflow: auto 或者其他除默认的 overflow: visible 以外的值。<div> 元素变成布局中的小型布局，任何子元素都会被包含进去。

使用 overflow 创建新的 BFC，是因为 overflow 属性会告诉浏览器应该怎样处理溢出的内容。如果使用它仅仅为了创建 BFC，你可能会遇到不希望出现的滚动条或阴影，需要注意。另外，对于后续的开发者，可能不清楚当时为什么使用 overflow，所以最好添加一些注释来解释为什么这样做。

使用 display: flow-root

一个新的 display 属性的值，它可以创建无副作用的 BFC。在父级块中使用 display: flow-root 可以创建新的 BFC。

给 <div> 元素设置 display: flow-root 属性后，<div> 中的所有内容都会参与 BFC，浮动的内容不会从底部溢出。

你可以从 flow-root 这个值的名字上看出来，它创建一个新的用于流式布局的上下文，行为如同 root（在浏览器中是 <html>）元素。

HTML 
<section>
  <div class="box">
    <div class="float">我是浮动的盒子！</div>
    <p>我是容器内的内容。</p>
  </div>
</section>
<section>
  <div class="box" style="overflow:auto">
    <div class="float">我是浮动的盒子！</div>
    <p>我是 <code>overflow:auto</code> 容器内部的内容。</p>
  </div>
</section>
<section>
  <div class="box" style="display:flow-root">
    <div class="float">我是浮动的盒子！</div>
    <p>我是 <code>display:flow-root</code> 容器内部的内容。</p>
  </div>
</section>
CSS 
section {
  height: 150px;
}
.box {
  background-color: rgb(224, 206, 247);
  border: 5px solid rebeccapurple;
}
.box[style] {
  background-color: aliceblue;
  border: 5px solid steelblue;
}
.float {
  float: left;
  width: 200px;
  height: 100px;
  background-color: rgba(255, 255, 255, 0.5);
  border: 1px solid black;
  padding: 10px;
}

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4