div内のフローティング要素は、divの外側にフロートします。どうして？
回答:
最も簡単なのはoverflow:hidden、親div に配置し、高さを指定しないことです。
#parent { overflow: hidden }もう1つの方法は、親divをフロートさせることです。
#parent { float: left; width: 100% }別の方法では、clear要素を使用します。
<div class="parent">
<img class="floated_child" src="..." />
<span class="clear"></span>
</div>CSS
span.clear { clear: left; display: block; }overflow:hidden力ブラウザはそれができる最善の親の子要素を含むように厥はそれを修正する理由。。
overflow: hiddenはここにあると思います：リンク。そして、多くのおかげで、それは私のために働いた
overflow: hiddenちょうど親コンテナからの流出要素の一部を非表示になります。私にとっては、これにより特定のテキストの一部が読めなくなりました。
理由
要素がフロート、絶対配置、またはルート要素の場合、要素はフローから呼び出されます。
したがって、流入要素のように周囲の要素に影響を与えることはありません。
これは9.5 Floatsで説明されています：
フロートはフロート内にないため、フロートボックスの前後に作成された非配置ブロックボックスは、フロートが存在しないかのように垂直にフローします。ただし、フロートの隣に作成された現在のラインボックスと後続のラインボックスは、フロートのマージンボックス用のスペースを確保するために必要に応じて短縮されます。
これは、「10.6高さとマージンの計算」でも指定されています。「正常な」ブロック、
通常のフローの子のみが考慮されます（つまり、フローティングボックスと絶対位置のボックスは無視されます[…]）
ハッキーソリューション：クリアランス
この問題を解決する方法の1つは、一部の流入要素をすべてのフロートの下に配置することです。次に、親の高さがその要素をラップするように大きくなります（したがって、フロートも）。
これは、clearプロパティを使用して実現できます。
このプロパティは、要素のボックスのどの側が 以前のフローティングボックスに隣接していない可能性があるかを示します。
したがって、解決策はclear: both、フロートの最後の兄弟として空の要素を追加することです
<div style="clear: both"></div>ただし、これはセマンティックではありません。したがって、親の最後に疑似要素を生成する方が適切です。
.clearfix::after {
clear: both;
display: block;
}このアプローチには複数のバリエーションがあります。たとえば、廃止予定の単一コロン構文:afterを使用して古いブラウザをサポートしたり、他のブロックレベルのディスプレイを使用したりしますdisplay: table。
解決策：BFCルート
最初に定義された問題のある動作には例外があります。ブロック要素がブロックフォーマットコンテキストを確立する場合（BFCルートである場合）、そのフローティングコンテンツもラップします。
10.6.7ブロック自動化コンテキストルートの「自動」高さによると、
要素に下マージンエッジが要素の下コンテンツエッジより下にある浮動子孫がある場合、高さはそれらのエッジを含むように増加します。
さらに、9.5 Floatsで説明したように、BFCルートも次の理由で役立ちます。
テーブルの境界ボックス、ブロックレベルで置換された要素、または新しいブロックフォーマットコンテキストを確立する通常のフローの要素[…]は、要素自体と同じブロックフォーマットコンテキスト内のフロートのマージンボックスと重複してはなりません。 。
ブロックフォーマットコンテキストは、
ブロックボックス
overflow以外のvisible、例えばhidden.bfc-root { overflow: hidden; /* display: block; */ }ブロックボックスではないブロックコンテナー：
displayがinline-block、table-cellまたはに設定されている場合table-caption。.bfc-root { display: inline-block; }フローティング要素：
floatがleftまたはに設定されている場合right。.bfc-root { float: left; }絶対配置要素：
positionがabsoluteまたはに設定されている場合fixed。.bfc-root { position: absolute; }
これらは、オーバーフローするコンテンツのクリッピング、縮小して合わせるアルゴリズムで自動幅を計算する、フローから外れるなど、望ましくない付随的な影響をもたらす可能性があることに注意してください。したがって、問題は、BFCを確立する目に見えるオーバーフローを持つインフローブロックレベル要素を持つことができないことです。
Display L3は次の問題に対処します。
作成
flowし、flow-root内側ディスプレイタイプ良好エクスプレスフローレイアウトの表示タイプと素子製造するための明示的なスイッチを作成するために、BFCのルート。（これは::after { clear: both; }、overflow: hidden[…]のようなハックの必要性を排除するはずです）
残念ながら、まだブラウザーはサポートされていません。最終的には使用できるかもしれません
.bfc-root {
display: flow-root;
}フローティングdiv(s)をdivCSSとCSS に入れて、overflow:hidden;
うまく機能するようにします。
W3Schoolsの推奨事項：
置く overflow: auto親要素であり、それは「色」の要素の余白を含めた全体の背景をでしょう。また、フローティング要素は境界線の内側にとどまります。
http://www.w3schools.com/css/tryit.asp?filename=trycss_layout_clearfix
欠けているものは何もありません。Floatは、画像（たとえば）をテキストの複数の段落の横に配置して、テキストが画像の周囲に流れるようにする場合のために設計されました。テキストがコンテナを「伸ばした」場合、それは起こりません。最初の段落が終了し、次の段落が画像の下（おそらく数百ピクセル下）で始まります。
そして、それがあなたがあなた自身の結果を得ている理由です。
これがより現代的なアプローチです：
.parent {display: flow-root;} clearfixesはもうありません。
psオーバーフローの使用：非表示。ボックスシャドウを非表示にするので...
LSerni、私のために解決してくれてありがとう。
これを達成するには：
+-----------------------------------------+
| +-------+ +-------+ |
| | Text1 | | Text1 | |
| +-------+ +-------+ |
|+----------------------------------------+これを行う必要があります：
<div style="overflow:auto">
<div style="display:inline-block;float:left"> Text1 </div>
<div style="display:inline-block;float:right"> Text2 </div>
</div>ルーカスが言うように、あなたが説明しているのはfloatプロパティの意図された動作です。多くの人々を混乱させるのは、CSSレイアウトモデルの欠点を補うために、フロートが本来の使用目的をはるかに超えてプッシュされていることです。
このプロパティがどのように機能するかをよりよく理解したい場合は、Floatutorialをご覧ください。
最初に簡単に行うことができます。最初にdivを柔軟にして、正当化するコンテンツを右または左に適用すると、問題が解決します。
<div style="display: flex;padding-bottom: 8px;justify-content: flex-end;">
<button style="font-weight: bold;outline: none;background-color: #2764ff;border-radius: 3px;margin-left: 12px;border: none;padding: 3px 6px;color: white;text-align: center;font-family: 'Open Sans', sans-serif;text-decoration: none;margin-right: 14px;">Sense</button>
</div>