フローティング div+css_html/css_WEB-ITnose に関する一般的な問題と解決策

今日、ようやく記事を書く時間ができました。もし間違いがあれば、修正してください。私が学習しているときに、「div+css」などの非常に単純な質問に遭遇しました。 「「Floating」は素晴らしい登場人物たちによって非常に深く書かれていたので、それがそのレーベルの18世代の祖先が関与した1つの属性に基づいていることが判明するまでに長い時間がかかりました。それについては話さないようにしましょう…

まず第一に、あなたは Web アーキテクトである必要があります。あるいは、Web アーキテクトになる予定です。正直に言うと、私は今、この業界についてはあまり楽観的ではありません。なぜなら、今この仕事をしている人が多すぎるからです。 ITって何ですか？やればやるほど価値が下がっていきます（笑）、文句は言っておきましょう、それでは本題に移りましょう！

1. IE6 の float に関するいくつかのバグの問題

Web ページのレイアウトに float を使用すると、理解するのが難しい、または信じられないような問題がいくつか発生します。例: IE6 では 3PX が右側に表示されます。現時点では、他のブラウザーは非常に標準的であり、IE6 が遅れていることを気にする人はほとんどいません。しかし、デザイナーとして、この問題の解決策は実際には非常に簡単です。ここでは、HACK テクノロジーを使用する必要があります。CSS に .box{margin-right:0px; margin-right:-3px! important;} を追加すれば問題ありません。 HACK テクノロジーを知らない場合は、オンラインで調べることができます。たくさんあります。

2. Float Chaos レイアウト div+css float

最も一般的な問題は、上の 2 つのブロックに float 属性を使用すると、下のブロックが上部の右側に表示されることです。この問題はデザインにあります。これをやっていると頭が痛くなりますが、多くの初心者には理解できない部分でもあります。これは実際には非常に簡単で、clear 要素の clear 属性を使用するには、次のようなコンテナを上記の 2 つの div の下に記述するだけです。 960px; margin-top:5px;}

#clear{clear:both;}

<div id="bb">

...

</div>

<div id ="bb ">

...
</div>

<div id="clear">....</div>

これで、この大きな問題の質問を解決できます。

3. Float はダブルスペースで表示されます

li が float 属性を使用すると、ダブルスペースが表示されます。つまり、li の左マージンを 3PX に設定すると、左マージンは 6PX になりますが、実際にはこれだけです。これは、li 要素で行う必要があります。これは、css:display:inline に inline 属性を設定することで解決できます。

4. 高さが不明な子要素が浮いている場合、親要素を高さに合わせます

親の最後に <div id="clear">....</ を追加できます要素 div> は次のようになります:

#oo{ margin:0 auto;width:960px;}

#bb{float:left;width:480px;}

#aa{width:960px; ; }

#clear{clear:both;}

<div id="oo"> <!--これは親要素です-->

<div id="bb">

...

</div>

<div id="bb">

......

</div>

<div id="clear"> .. ...</div>

</div><!--これは親要素の終わりです-->、子要素も高さに適応する場合は上記と同じです。

これは、私が現在遭遇している div+css フローティングに関する一般的な問題と解決策です。何か間違っている場合は、修正してください。皆さんも一緒に議論してください。