検索

ホームページ  >  記事  >  ウェブフロントエンド  >  フロートの定義とフロートのクリアランス (BFC)

フロートの定義とフロートのクリアランス (BFC)

零下一度
零下一度オリジナル
2017-05-10 11:57:301636ブラウズ

Floating

1. float とは

要素の <a href="http://www.php.cn/wiki/919.html" target="_blank">float<p></p></a> の場合属性 <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. 浮动的影响

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

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

    フロートの定義とフロートのクリアランス (BFC)

    父元素高度塌陷

  • 文本环绕。

    フロートの定義とフロートのクリアランス (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 值，可以看到效果：

      フロートの定義とフロートのクリアランス (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 不会掉下来是因为它本来就是脱离文文档流的浮动元素。

    清除浮动

    在子元素上清除

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

    • 浮动元素后面若有兄弟元素，则可以在给它的兄弟元素加上clear属性。
      如文本环绕那一部分代码，给 .normal 加上 clear:left 或者 clear:both。clear 的具体用法这里不做过多赘述。

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

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

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

    在父元素上清除，即BFC

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

    浮动、绝对定位元素（position 为 absolute 或 fixed）、行内块元素 display:inline-block、表格单元格 display:table-cell、表格标题 display:table-caption 以及 overflow 属性值不为 visible 的元素（除了该值被传播到视点 viewport 的情况）将创建一个新的块级格式化上下文。

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

    1. float 不为 none

    2. position 不为 static 或 relative

    3. display 为 table-cell、table-caption、inline-block、flex、inline-flex

    4. overflow 不为 visible が none でない場合、フローティングが発生します。

      rrreeerrreee
      5. 2. フローティングの影響

    1. フローティングにより要素がドキュメント フローから外れます。具体的なパフォーマンスは次のとおりです。

      • 親要素は高度に折りたたまれています。つまり、フローティング要素は含まれません。
        たとえば、上記のコードは

        フロートの定義とフロートのクリアランス (BFC)

        親要素は高度に折りたたまれています

      • テキストの折り返し。

        フロートの定義とフロートのクリアランス (BFC)

        テキストの折り返し効果


        ここでは、.normal 要素の幅が .float をカバーしていることがわかります。 code> 要素は存在しますが、 <code>.float 要素の下にはテキストがありません。これは、テキストが「絞り出された」ことを意味します。これは、テキストがドキュメント フローから切り離されても、中断されないためです。テキストの流れから離れてください。この効果は、float 属性の本来の目的でもあります。コードは次のとおりです。 rrreeerrreee

    2. フローティング要素のマージン 🎜合併しない。
      マージンの結合に関する関連コンテンツについては、ここをクリックしてください。 🎜🎜
    3. 🎜 要素がフローティングされると、インライン ブロック要素、つまり <a href="http://www.php.cn/wiki/927.html" target=" になります。 _blank">表示🎜 : インラインブロック</a>。 🎜🎜🎜🎜3. フローティングアプリケーション🎜
      • 🎜上記のテキストの折り返し。 🎜🎜
      • 🎜 左右に固定幅、中央に適応型の 3 列レイアウトを作成します。 🎜rrreeerrreee🎜ここでは、意図的に margin 値を追加しました。その効果がわかります: 🎜

        フロートの定義とフロートのクリアランス (BFC)
        🎜

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

      🎜floatをクリアする🎜🎜子要素をクリアする🎜🎜ここでは、意味のないタグを生成しないメソッドのみを書きます。 🎜
      • 🎜 フローティング要素の背後に兄弟要素がある場合は、その兄弟要素に clear 属性を追加できます。
        テキストがコードのその部分を囲む場合は、clear:left または clear:both を .normal に追加します。 clear の具体的な使用法については、ここでは詳しく説明しません。 🎜🎜
      • 🎜フローティングを解除する要素に疑似クラスまたは疑似要素を追加します。 🎜rrreee🎜::after の使用方法については、MDN のドキュメントを参照してください。 🎜🎜
      🎜親要素、つまり BFC🎜🎜BFC (ブロック レベルの書式設定コンテキスト) を明確にします。公式の説明は次のとおりです: 🎜
      🎜 浮動、絶対配置要素。 ( 位置 は absolute または fixed)、インライン ブロック要素 display:inline-block、テーブル セル 属性値が <code>visible ではない、display:table -cell、table-caption display:table-caption、および overflow 要素 (ただし、値がビューポート viewport に伝播されると、新しいブロックレベルの書式設定コンテキストが作成されます。 🎜
      🎜要約すると、次の条件のいずれかを満たしている必要があります: 🎜
      1. 🎜float が none🎜🎜<li>🎜<code>position は static または relative ではありません🎜🎜
      2. 🎜display table-cell、table-caption、inline-block、flex、inline-flex code>🎜🎜<li>🎜<code>overflow は visible ではありません🎜🎜🎜🎜 上記の属性のいずれかを親要素に追加して条件を満たす限り、条件、つまり親要素に追加すると、BFC は子要素の float をクリアできます。 🎜🎜【関連おすすめ】🎜🎜1.🎜無料のCSSオンラインビデオチュートリアル🎜🎜🎜2.🎜CSSオンラインマニュアル🎜🎜🎜3.🎜php.cn Dugu Jiijian (2) - CSSビデオチュートリアル🎜🎜

    以上がフロートの定義とフロートのクリアランス (BFC)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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

    関連記事

    続きを見る