ホームページ > 記事 > ウェブフロントエンド > CSS Float および Float Clear (BFC) の簡単なチュートリアル

CSS Float および Float Clear (BFC) の簡単なチュートリアル

PHPzオリジナル: 2017-04-04 10:59:111760ブラウズ

Float

1. float とは

要素の <a href="http://www.php.cn/wiki/919.html" target="_blank">float<code><a href="http://www.php.cn/wiki/919.html" target="_blank">float</a> 属性不为 none 时就产生了浮动。

<p class="float">float</p>

.float {
  float: left;
  width: 100px;
  height: 100px;
  background-color: #ddd;
}

2. 浮动的影响

浮动会使元素脱离文档流，具体表现为：

父元素高度塌陷，即不会包含浮动元素。
比如上面的代码就会表现为

父元素高度塌陷

文本环绕。

CSS Float および Float Clear (BFC) の簡単なチュートリアル

文本环绕效果

可以注意到这里.normal元素的宽度覆盖了.float元素，但是.float元素下是没有文本的，也就是说文本被“挤”出来了，这是因为它虽然会脱离文档流，但是不会脱离文本流。这个效果也是float属性的本意。其代码如下：

<p class="float">float</p>

正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素

body {
  background-color: #ccc;
}
.float {
  float: left;
  width: 100px;
  height: 100px;
  background-color: #ddd;
}
.normal {
  background-color: #fff;
}

浮动元素的外边距不会合并。
关于外边距合并的相关内容可以戳这里。

元素一旦浮动便会变成行内块元素，即 <a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>: inline-block。

3. 浮动的应用

上面提到的文本环绕。

写一个三列布局，左右固定宽度，中间自适应。

<body>
  <p class="left float">left</p>
  <p class="right float">right</p>
  <p class="mid">自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素</p>
</body>

body {
  background-color: #ccc;
}
.float {
  float: left;
  width: 100px;
  height: 100px;
  background-color: #ddd;
}
.left {
  float: left;
}
.right {
  float: right;
}
.mid {
  height: 100px;
  background-color: #fff;
  margin: 200px; /*故意加上了上下 margin 值*/
}

这里我故意加上了上了 margin 值，可以看到效果：

CSS Float および Float Clear (BFC) の簡単なチュートリアル

三列布局

body 也随 .mid 的 margin 往下掉了，这点可以用前面介绍的外边距合并来解释。

ps：我第一次自己写这个三列布局的时候，html 是这样写的

<body>
  <p class="left float">left</p>
  <p class="mid">自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素</p>
  <p class="right float">right</p>
</body>

如上把中间自适应的元素写在中间，其实这样比较符合逻辑，但是如果这样写是行不通的，右边的元素会掉下来，因为 .mid 元素是块级元素，会占满整行，.left 不会掉下来是因为它本来就是脱离文文档流的浮动元素。

清除浮动

在子元素上清除

这里我只写不会产生无意义标签的方法。

浮动元素后面若有兄弟元素，则可以在给它的兄弟元素加上<a href="http://www.php.cn/wiki/917.html" target="_blank">clear</a>属性。
如文本环绕那一部分代码，给 .normal 加上 clear<a href="http://www.php.cn/wiki/974.html" target="_blank">:left</a> 或者 clear:both。clear 的具体用法这里不做过多赘述。

给要清除浮动的元素加上伪类或者伪元素。

.float::after {
  content: '';
  display: block;
  visiability: hidden;
  height: 0;
  clear: both;
}

关于 ::after 的使用可以看 MDN 的文档。

在父元素上清除，即BFC

BFC（Block Formatting Context），即块级格式上下文，它的官方解释是：

浮动、绝对定位元素（<a href="http://www.php.cn/wiki/902.html" target="_blank">position</a> 为 absolute 或 fixed）、行内块元素 display:inline-block、表格单元格 display:table-cell、表格标题 display:table-caption 以及 <a href="http://www.php.cn/wiki/923.html" target="_blank">overflow</a> 属性值不为 visible 的元素（除了该值被传播到视点 <a href="http://www.php.cn/css/css-rwd-viewport.html" target="_blank">viewport</a> 的情况）将创建一个新的块级格式化上下文。

总结来说它要满足下列条件之一：

float 不为 none
position 不为 <a href="http://www.php.cn/wiki/188.html" target="_blank">static</a> 或 relative code> 属性
が none でない場合、フローティングが発生します。 🎜rrreeerrreee🎜2. フローティングの影響🎜
1. 🎜フローティングにより、具体的には次のように要素がドキュメントフローから外れます: 🎜
- 🎜親要素は高度に折りたたまれています。つまり、フローティング要素は含まれません。
  たとえば、上記のコードは 🎜
  
  🎜
  
  親要素は高度に折りたたまれています🎜
- 🎜テキストの折り返し。
  🎜
  
  🎜
  
  テキストの折り返し効果🎜🎜
  ここでは、.normal 要素の幅が .float をカバーしていることがわかります。 code> 要素は存在しますが、 <code>.float 要素の下にはテキストがありません。これは、テキストが「絞り出された」ことを意味します。これは、テキストがドキュメントフローから切り離されても、中断されないためです。テキストの流れから離れてください。この効果は、float 属性の本来の目的でもあります。コードは次のとおりです: 🎜rrreeerrreee
🎜フローティングのマージン要素 🎜 はマージされません。
マージンの結合に関する関連コンテンツについては、ここをクリックしてください。 🎜
🎜 要素がフローティングされると、インラインブロック要素、つまり <a href="http://www.php.cn/wiki/927.html" target="_blank">表示🎜: インラインブロック</a>。 🎜

🎜3. フローティングアプリケーション 🎜

🎜 上記のテキストの折り返し。 🎜
🎜 左右に固定幅、中央に適応型の 3 列レイアウトを作成します。 🎜rrreeerrree🎜ここでは、意図的に margin 値を追加しました。その効果がわかります: 🎜

🎜

3 列レイアウト🎜🎜body も付属していますこれは、前に紹介したマージンのマージによって説明できます。 🎜🎜追記：この3カラムレイアウトを最初に書いたとき、HTMLは次のように書かれていました🎜rrreee🎜上記のように、真ん中のアダプティブ要素を真ん中に書きます。実際には、これはより論理的ですが、これを書くと機能しません。このように、 .mid 要素はブロックレベル要素であり、 .left 要素全体を埋めることになるため、右側の要素は落ちます。元々はドキュメントフローの浮動要素であるためです。 🎜

🎜フロートをクリアします🎜🎜🎜子要素をクリアします🎜🎜ここで私は無意味なタグを生成しないメソッドのみを記述してください。 🎜

🎜 フローティング要素の背後に兄弟要素がある場合は、

<a href="http://www.php%20%E3%82%92%E3%81%9D%E3%81%AE%E5%85%84%E5%BC%9F%E8%A6%81%E7%B4%A0%E3%81%AB%E8%BF%BD%E5%8A%A0%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82%20cn/wiki/917.html" target="_blank">clear🎜</a>

属性。
テキストがコードのその部分を囲んでいる場合は、clear<a href="http://www.php.cn/wiki/974.html" target="を">.normal に追加します。 code> "_blank">:left🎜</a> または clear:both。 clear の具体的な使用法については、ここでは詳しく説明しません。 🎜

🎜対象となる要素に疑似クラス🎜または疑似要素を追加します。クリアしました。 🎜rrreee🎜::after の使用方法については、MDN のドキュメントを参照してください。 🎜

🎜親要素、つまり BFC をクリアします🎜🎜BFC ( をブロック) 🎜matting Context)、つまりブロックレベルのフォーマットコンテキストの場合、その公式の説明は次のとおりです: 🎜

🎜Floating, 絶対位置の 🎜 要素 (<a href="http://www.php.cn/wiki/902.html" target="_blank">position🎜</a> は absolute) code> または <code>fixed)、インラインブロック要素 display:inline-block、表 🎜 セル display:table-cell、表タイトル display:table-caption および <a href="http:/%20/%20www.php.cn/wiki/923.html" target="_blank">overflow🎜</a> 属性値が visible ではない要素 (値がビューポートに伝播される場合を除くビューポート🎜) は、新しいブロックレベルの書式設定コンテキストを作成します。 🎜

🎜要約すると、次の条件のいずれかを満たしている必要があります: 🎜

🎜float が none🎜
🎜position は <a href="http://www.php.cn/wiki/188.html" target="_blank ">静的🎜</a> または 相対🎜
display は table-cell、table-caption、inline-block、flex、<code>inline-flexdisplay 为 table-cell、table-caption、inline-block、flex、inline-flex
overflow 不为 visible

overflow は visible ではありません

🎜🎜上記の属性のいずれかを親に追加するだけですelement 条件が満たされる場合、つまり親要素に BFC を追加すると、子要素の float をクリアできます。 🎜

以上がCSS Float および Float Clear (BFC) の簡単なチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：高性能視差アニメーション【翻訳】次の記事：高性能視差アニメーション【翻訳】

続きを見る