2

<li>私が読んだ 1 つの投稿で、floated inに関する質問がありました<ul>。<ul>男は、 を浮かせたときに背景が消える理由<li>と、これを修正する方法を尋ねていました。答えは、に設定overflow:hiddenすることでした<ul>。試してみましたが、うまくいきますが、そのようなことを読んだり聞いたりしたことはありません.

私の質問は: overflow:hiddenclearfix のような要素をクリアするために使用できますか?

この場合：

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

次の CSS があるとします。

ul{
  background: #999;
  overflow: hidden;
}

li {
  float: left;
}

まだクリアする必要がありますか:<ul class="clearfix">と CSS:

.clearfix { *zoom: 1; }
.clearfix:after { 
    width: 100%; 
    content: ''; 
    font-size: 0; 
    line-height: 0; 
    text-indent: -4000px; 
    clear: both; 
    display:block; 
}

またはoverflow:hidden、その仕事を任せることができます

4

1 に答える 1

6

はい！

次の 3 つの方法がありますclear。

  1. ed 要素overflow: hidden;の親に使用します。float
  2. float: left;orをed 要素float: right;の親に与える。float
  3. clearfloat要素の最後に兄弟として ing 要素を与える。

あなたの質問のために...

overflow: hidden;はい、 to do をそのまま使用できますが、問題があります。フライアウト リストやポップオーバーのようなものがあるとします。これらはULタグの寸法で切り取られます。

それらも表示したい場合は、 を使用する必要があります<ul class="clearfix">。clearfixよりも優れていると言えoverflow: hidden;ます。

ps: 私は、すべてのブラウザーで互換性のあるエンタープライズ Web アプリケーションを開発するフロント エンド エンジニアです。

于 2013-01-16T11:11:49.540 に答える