4

私は最近、次のように多くのフロートを使用しています。

<div id="buttons">
  <input type="button" id="btn1" value="Button One">
  <input type="button" id="btn2" value="Button Two">
  <input type="button" id="btn3" value="Button Three">
</div>

時々、ボタンを右にフロートさせます。時々、それらすべてを右にフロートさせます。ここから問題が始まります。それをすると本当に流れが狂ってしまうので、これらを入れ続けなければなりません：

<div style="clear:both;"></div>

最後に。それらをすべてフローティングしていない場合、レイアウトが崩れます。

これに対する良い解決策はありますか？

4

5 に答える 5

12

はい、overflow: hiddenコンテナで使用します。

<style type="text/css">
#buttons { overflow: hidden; }
</style>
于 2009-05-17T16:05:58.347 に答える
9

これは、CSS 学習曲線の大きな部分です。アイテムをフロートさせると、それらを含む要素は、フロートされた要素の垂直方向の高さを考慮しなくなりました。ジレンマを回避するために使用できる解決策がいくつかあります。

#button コンテナーの高さをボタンの高さに指定するだけです。

#button { height: 30px; }

より洗練されたソリューションは、clearfix ハックです。これは非常に強力で、追加のマークアップやインライン CSS を追加しなくてもうまくいきます。

#buttons:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

#buttons {
    display: inline-block;
}

html[xmlns] #buttons {
    display: block;
}

* html #buttons {
    height: 1%;
}
于 2009-05-17T16:30:13.090 に答える
1

親のオーバーフローを定義している限り、すべてのフロートがクリアされます。

親で overflow:auto を使用してください。

http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

(これは display:inherit を使用しても機能すると聞いたことがありますが、試したことはありません。)

于 2009-05-17T17:11:58.000 に答える
1

CSS で項目をフロートすると、ページの自然なフロー状態から削除されます。

それらが containerDIVにある場合、それはアイテムをシフトアウトし、その親には子要素がどこに行ったかがわかりません。コンテナは、要素がそもそもそこになかったかのように、領域の多くをボックス化するように収縮します。

それをカバーするにoverflow:hiddenは、コンテナのプロパティを指定する必要があります。

デフォルトでは に設定されてvisibleおり、そのままフローティングされている場合は、何でもボックスから「落ちる」ことができます。

CSS でこれを設定して修正します。

#buttons 
{
    overflow:hidden;
}

これにより、フローティング要素が親のコンテキストと範囲内に表示されるように制限されますDIV。

于 2009-09-12T13:54:54.747 に答える
0

通常、最適なオプションは、clearfix メソッド、または親に「overflow: hidden」を設定するメソッドです。

特定の例では、別のオプションがあります。入力をまったくフロートできず、#buttons に 'text-align: right' を設定できませんでした。

#buttons {
    text-align: right;
    }

私は「overflow: hidden」にかなり依存していますが、「overflow: hidden」が設定されている包含​​要素の外側 (または部分的に外側) に要素を配置しようとしている場合、配置されていることに注意してください。要素は、それを含む要素の境界で切り取られます。(これはあまり頻繁に発生するものではありませんが、注意が必要な「落とし穴」です。)

また、Jeff Starr によるブログ記事「Clearfix CSS Hack に関する教訓」も興味深いものです。

于 2009-05-17T19:12:29.170 に答える