設定された幅の要素が浮動要素に巻き付かずに落ちない

Question

right-columnの幅を設定すると、十分なスペースがあるにもかかわらず、周りを包む代わりに左浮動要素left-columnの下に落ちます。なぜこうなった？十分なスペースがあるかどうか私の理解から、右側の列は左浮動要素の周りをリフローする必要がありますか？

* { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 
.container { 
 
\t width: 400px; 
 
\t overflow: hidden; 
 
\t background: lightgreen; 
 
} 
 
.left-column { 
 
\t width: 200px; 
 
\t float: left; 
 
\t background: red; 
 
} 
 
.right-column { 
 
\t width: 200px; 
 
\t background: cyan; 
 
}

<div class='container'> 
 
\t <div class='left-column'>I am the left column</div> 
 
\t <div class='right-column'>I am the right column</div> 
 
</div>

右フロートするright-columnを設定したり、margin-left: 200pxを設定しているのはなぜ低下を防ぎますか？

* { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 
.container { 
 
\t width: 400px; 
 
\t overflow: hidden; 
 
\t background: lightgreen; 
 
} 
 
.left-column { 
 
\t width: 200px; 
 
\t float: left; 
 
\t background: red; 
 
} 
 
.right-column { 
 
\t width: 200px; 
 
\t float: right; 
 
\t background: cyan; 
 
}

<div class='container'> 
 
\t \t <div class='left-column'>I am the left column</div> 
 
\t \t <div class='right-column'>I am the right column</div> 
 
\t </div>

Answer 1

要素を浮動させると、文書の通常の流れから削除されます。テキストとインライン要素は、他のブロックレベルの要素ではなくにラップされます。浮動小数点要素とブロックレベル要素は現在重複しており、折り返しブロック要素内のテキスト/インラインコンテンツのみが浮動小数点要素を囲みます。

https://developer.mozilla.org/en-US/docs/Web/CSS/float

フロートCSSプロパティは、素子が通常の流れから取り出され、テキストとインライン要素がその周囲に折り返され、その容器の左側または右側に沿って配置されなければならないことを指定します。あなたのコードで

は、ブロックレベル要素.right-columnは、左の列に巻き付けていない - しかし、それは意志の内のテキスト/コンテンツ、あなたが要素に同じ幅を与えてくれた点が異なります。左と右のdivは現在重複していますが、同じ幅に設定されているため、互いに重なり合い、右の列のテキストは左の列の下にはありません。そのテキストは技術的には左の列を囲むように配置されていますが、幅の制限があるため、左の列の下には折り返されません。 .right-columnの幅を少し広げて見ると分かります。 .right-columnには、左の列の横に表示するテキストコンテンツの一部に十分な余裕があることがわかります。

* { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 
.container { 
 
\t width: 400px; 
 
\t overflow: hidden; 
 
\t background: lightgreen; 
 
} 
 
.left-column { 
 
\t width: 200px; 
 
\t float: left; 
 
\t background: red; 
 
} 
 
.right-column { 
 
\t width: 300px; 
 
\t background: cyan; 
 
}

<div class='container'> 
 
    <div class='left-column'>I am the left column</div> 
 
    <div class='right-column'>I am the right column</div> 
 
</div>

Answer 2

編集なぜ右div

ショートアンスで作業していないフロート

：

.right-columnの浮動位置は書いていません。

ロングアンス

初期divblock label要素です。デフォルトdirection: ltr;。 .left-columnと.right-columnにのみwidthを設定すると、デフォルトでleftの方向が設定されます。あなたの最初のスニペットは、.left-columnの場合にのみfloat: left;に設定されています。右側に十分なスペースがあっても、.right-colunの方向は変わりません。あなたの最初のスニペット.right-columnは正しい方向に設定されていません。すべての列の方向を変更する必要があります。

CSSfloatプロパティは実際には変更されませんdirectionプロパティはすべての要素に対してbox-modleの位置を変更します。

注：親要素によって制御されるフローティング要素ボックスモデルなし方向プロパティ。

言語のブラウザエンジンltrで設定されたDirectionプロパティのデフォルト。あなたはヘブライ語とアラビア言語ウェブサイトを開発しようとすると、あなたがrtlからltrを意味し、浮動左から右へ体の向きを変える必要があり、この時は右(float: right;)すべての要素についてから始めるべきです。

UN-浮動要素が

デフォルト.containerもし方向がltrとfloat財産.left-columnと.right-columnなしでどの方向特性制御directionプロパティで遊ぶことができます。

* { 
 
    \t -webkit-box-sizing: border-box; 
 
     -moz-box-sizing: border-box; 
 
     box-sizing: border-box; 
 
    } 
 
    body{ 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 
    .container { 
 
     direction: ltr; 
 
     padding: 5px; 
 
    \t width: 400px; 
 
    \t overflow: hidden; 
 
    \t background: lightgreen; 
 
    } 
 
    .left-column { 
 
    \t width: 50%; 
 
    \t /*float: left; */ /* No float */ 
 
    \t background: red; 
 
    } 
 
    .right-column { 
 
    \t width: 50%; 
 
    \t /*float: left;*/ /* No float*/ 
 
    \t background: cyan; 
 
    }

<div class='container'> 
 
    <div class='left-column'>I am the left column</div> 
 
    <div class='right-column'>I am the right column</div> 
 
</div>

デフォルト.containerもし方向が.left-columnためltrとfloat: left;です。

* { 
 
     -webkit-box-sizing: border-box; 
 
     -moz-box-sizing: border-box; 
 
     box-sizing: border-box; 
 
    } 
 
    body{ 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 
    .container { 
 
     direction: ltr; 
 
     padding: 5px; 
 
     width: 400px; 
 
     overflow: hidden; 
 
     background: lightgreen; 
 
    } 
 
    .left-column { 
 
     width: 50%; 
 
     float: left; /* float left */ 
 
     background: red; 
 
    } 
 
    .right-column { 
 
     width: 50%; 
 
     /*float: left;*/ /* No float*/ 
 
     background: cyan; 
 
    }

<div class='container'> 
 
    <div class='left-column'>I am the left column</div> 
 
    <div class='right-column'>I am the right column</div> 
 
</div>

注：変更なし

デフォルト.containerもし方向が.left-columnと.right-columnためltrとfloat: left;です。

* { 
 
     -webkit-box-sizing: border-box; 
 
     -moz-box-sizing: border-box; 
 
     box-sizing: border-box; 
 
    } 
 
    body{ 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 
    .container { 
 
     direction: ltr; 
 
     padding: 5px; 
 
     width: 400px; 
 
     overflow: hidden; 
 
     background: lightgreen; 
 
    } 
 
    .left-column { 
 
     width: 50%; 
 
     float: left; /* No float */ 
 
     background: red; 
 
    } 
 
    .right-column { 
 
     width: 50%; 
 
     float: left; /* No float*/ 
 
     background: cyan; 
 
    }

<div class='container'> 
 
<div class='left-column'>I am the left column</div> 
 
<div class='right-column'>I am the right column</div> 
 
</div>

注：今では、ボックスモデルの位置を変更します。

カスタム.container方向がrtlとfloat財産.left-columnと.right-columnなしの場合。あなたはこのようにして遊ぶことができます

* { 
 
     -webkit-box-sizing: border-box; 
 
     -moz-box-sizing: border-box; 
 
     box-sizing: border-box; 
 
    } 
 
    body{ 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 
    .container { 
 
     direction: rtl; 
 
     padding: 5px; 
 
     width: 400px; 
 
     overflow: hidden; 
 
     background: lightgreen; 
 
    } 
 
    .left-column { 
 
     width: 50%; 
 
     /*float: left; */ /* No float */ 
 
     background: red; 
 
    } 
 
    .right-column { 
 
     width: 50%; 
 
     /*float: left;*/ /* No float*/ 
 
     background: cyan; 
 
    }

<div class='container'> 
 
<div class='left-column'>I am the left column</div> 
 
<div class='right-column'>I am the right column</div> 
 
</div>

。

方向プロパティ制御浮動小数点のみです。