BFC レイアウトの原理

このブログを書こうと思った最初の目的は、実は float を解くときにこのメソッドを見たときに、BFC とは何なのか、なぜ float がクリアできるのかを考えたのです。見れば見るほど結果は分からないので、注意深く調べて学習経験を要約する必要があります。

1.BFCとは

BFC は Box Formatting Context の略語で、直訳すると「ブロックレベルの書式設定コンテキスト」となります。

1.1 BoxはCSSレイアウトの基本単位です

ボックスは CSS レイアウトのオブジェクトおよび基本単位であり、要素のタイプと表示特性によってボックスのタイプが決まります。

• ブロックレベルのボックス: ブロック、リスト項目、テーブルの表示属性を持つ要素はブロックレベルのボックスを生成します。そしてブロック書式設定コンテキストに参加します;
• インライン レベル ボックス: inline、inline-block、および inline-table の表示属性を持つ要素は、インライン レベル ボックスを生成します。そして、インライン書式設定コンテキストに参加します。
ランインボックス
• ランインボックスにブロックボックスが含まれている場合、このランインボックスもブロックボックスになります

run-in ボックスの直後の兄弟ノードがブロック ボックスの場合、この run-in ボックスはこのブロック ボックス内のインライン ボックスとして使用されます。 run-in ボックスは、すでに run- で始まるノードに入ることができません。 in box ブロック内には、それ自体を入力することはできません

display:run-in;

ブロック内

それ以外の場合、ランインボックスはブロックボックスになります

1.2 コンテキストのフォーマット

はページ内のレンダリング領域を指し、そのサブ要素の配置方法、およびサブ要素の相互作用や他の要素との相互作用を決定する一連のレンダリング ルールがあります。

最も一般的な書式設定コンテキストは、ブロック書式設定コンテキスト (略して BFC) とインライン書式設定コンテキスト (略して IFC) です。

1.3 BFC

ブロックレベルの書式設定コンテキストは、独立したブロックレベルのレンダリング領域を指します。この領域には、ブロックレベルのボックスのレイアウトを制約するためのレンダリングルールのセットがあり、外部とは何の関係もありません。地域の。

2.BFCの世代

ルート要素
float の値は none ではありません
オーバーフローの値は表示されません
displayの値はinline-block、table-cell、table-captionです
位置の値は絶対または固定です

3.BFCレイアウトルール

内部ボックスは縦方向に順番に配置されます。
ボックスの垂直距離はマージンによって決まります。同じ BFC に属する 2 つの隣接するボックスの余白は重なり合います
各要素のマージンボックスの左側は、それを含むブロック境界ボックスの左側に接しています(左から右への書式設定の場合、それ以外の場合はその逆です)。これは浮きがあった場合にも当てはまります。
BFCエリアはフロートボックスと重なりません。
BFC はページ上で分離された独立したコンテナーであり、コンテナー内のサブ要素は外部の要素には影響しません。およびその逆。
BFCの高さを計算するとき、浮動要素も計算に参加します

4. BFCの応用例

縦余白の重なりを防ぐ

上記のルール 2 では、同じ BFC に属する 2 つの隣接するボックスの余白が重なり合います。コードと効果は次のとおりです。

リーリー

 

 

 可明显看出三个div之间的magin是都是10，互相发生了重叠。那怎么避免呢，规则2说了，是处于同一个BFC的相邻box元素会发生margin重叠，那我们让他们不处于一个BFC不就行了呀，所以给div元素外加了个p标签：

 　　　　自适应两栏布局

 上述规则3中，每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

<span style="color: #0000ff"><span style="color: #800000">style</span><span style="color: #0000ff">></span><span style="background-color: #f5f5f5; color: #800000"> 
    body </span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000"> 
        width</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 300px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000"> 
        position</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> relative</span><span style="background-color: #f5f5f5; color: #000000">;</span> 
    <span style="background-color: #f5f5f5; color: #000000">}</span><span style="background-color: #f5f5f5; color: #800000"> 
  
    .aside </span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000"> 
        width</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 100px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000"> 
        height</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 150px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000"> 
        float</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> left</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000"> 
        background</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> #f66</span><span style="background-color: #f5f5f5; color: #000000">;</span> 
    <span style="background-color: #f5f5f5; color: #000000">}</span><span style="background-color: #f5f5f5; color: #800000"> 
  
    .main </span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000"> 
        width</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 200px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">
        height</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 200px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000"> 
        background</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> #fcc</span><span style="background-color: #f5f5f5; color: #000000">;</span> 
    <span style="background-color: #f5f5f5; color: #000000">}</span> 
<span style="color: #0000ff"></span><span style="color: #800000">style</span><span style="color: #0000ff">></span> 
<span style="color: #0000ff"><span style="color: #800000">body</span><span style="color: #0000ff">></span> 
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="aside"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span> 
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="main"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span> 
<span style="color: #0000ff"></span><span style="color: #800000">body</span><span style="color: #0000ff">></span> </span></span></span></span>

View Code

 

 

 因为上述两个元素都同处body，所以他们的左边与body相接触。

再根据规则4，BFC区域不会与float区域重叠，我们可以给main触发BFC化实现两列布局，比如给main添加overflow：hidden 效果如下：

　　　　清除浮动

 根据规则6，计算BFC的高度时，浮动元素也参与计算，因此可以根据这个规则清除浮动，如下：

<span style="color: #0000ff"><span style="color: #800000">style</span><span style="color: #0000ff">></span><span style="background-color: #f5f5f5; color: #800000"> 
    .mydiv</span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000">
        border</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff">3px dashed #ddd</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">
        overflow</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> hidden</span><span style="background-color: #f5f5f5; color: #000000">;</span>
    <span style="background-color: #f5f5f5; color: #000000">}</span>
<span style="color: #0000ff"></span><span style="color: #800000">style</span><span style="color: #0000ff">></span> 
<span style="color: #0000ff"><span style="color: #800000">body</span><span style="color: #0000ff">></span> 
<span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="mydiv"</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">p </span><span style="color: #ff0000">style</span><span style="color: #0000ff">="float:left"</span><span style="color: #0000ff">></span>我设置了float属性<span style="color: #0000ff"></span><span style="color: #800000">p</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></span><span style="color: #800000">body</span><span style="color: #0000ff">></span> </span></span></span></span>

 

 

 这也承接了上节float清除浮动的BFC方式的原理，实际上使元素BFC化即可，可参照BFC的生成规则。

　　5.总结

 对于BFC，我认为我们主要是想通过掌握BFC的规则来实现一些布局效果，并且利用BFC规则达到我们的各种目的，比如清除浮动，清除margin重叠等。

上述几个例子同时也说明了规则5，BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之同理。

BFC内部的元素和外部元素不会相互影响，所以这就会使BFC计算高度时会包含浮动的高度，同样也避免了margin叠加。