Horizo​​nal Margins and Blockフォーマットコンテキスト

Question

column2とcolumn3の間の水平スペースがでないのはなぜですか10% = 5% + 5%ですか？

column1とcolumn2の間の水平マージンは、予期したとおりです10%です。

column3はBFCです。これがなぜcolumn2とcolumn3のマギンが崩壊するのか？

私はレイアウトをしようとしていません。私はちょうど、それがどうして起こったのか不思議です。

float:noneプロパティのために、左余白column 3がなくなっています。どうして？

.column { 
 
    width: 20%; 
 
    background-color: green; 
 
    float: left; 
 
    margin: 0 5%; 
 
    text-align:center; 
 
} 
 

 
/* Establishing a new block formatting 
 
    context in the last column */ 
 
.bfc { 
 
    float: none; 
 
    overflow: hidden; 
 
    margin-left:20%; /*This property added later.Where does this margin go?*/ 
 
}

<div class="container"> 
 
    <div class="column">column 1</div> 
 
    <div class="column">column 2</div> 
 
    <div class="column bfc">column 3</div> 
 
</div>

Answer 1

.column { 
 
    width: 20%; 
 
    background-color: green; 
 
    display:inline-block; 
 
    margin: 0 5%; 
 
    text-align:center; 
 
} 
 

 
/* Establishing a new block formatting 
 
    context in the last column */ 
 
.bfc { 
 
    
 
    overflow: hidden; 
 
}

<div class="container"> 
 
    <div class="column">column 1</div> 
 
    <div class="column">column 2</div> 
 
    <div class="column bfc">column 3</div> 
 
</div>

あなたは "表示：インラインブロック" を使用しなければならない代わりに、フロートはそれが正常に動作しますleft.Then。問題はbfcのfloat：noneプロパティでした。前の要素の最後から左マージンをとります。問題は、例えば、それをコメントアウトし、それを解決するために、クラス.bfcにfloat: none;によって引き起こされる

Answer 2

：

.bfc { 
    /*float: none;*/ 
} 

あなたはmarginで視覚的な違いを持っ​​ている理由はフローティング要素が一部残っているということですウェブページのフローで、noneを使用してfloatプロパティを削除すると（最後の列の場合と同じように）、代わりにstaticが表示されます。

.column { 
 
     width: 20%; 
 
     background-color: green; 
 
     float: left; 
 
     margin: 0 5%; 
 
     text-align:center; 
 
    } 
 

 
    /* Establishing a new block formatting 
 
     context in the last column */ 
 
    .bfc { 
 
     /*float: none;*/ 
 
     overflow: hidden; 
 
    }

<div class="container"> 
 
     <div class="column">column 1</div> 
 
     <div class="column">column 2</div> 
 
     <div class="column bfc">column 3</div> 
 
    </div>

Answer 3

あなたは自分のCSSからクラス.bfcを削除します。実際には必要ありません。それはスタイルの問題を引き起こします。