ホームページ  >  記事  >  ウェブフロントエンド  >  HTML_html/css_WEB-ITnose のフローティングとクリアについての考え

HTML_html/css_WEB-ITnose のフローティングとクリアについての考え

WBOY
WBOYオリジナル
2016-06-24 11:42:01877ブラウズ

レイアウトするときに float 属性を使用する必要があり、期待される目的を達成するためにそれと連携する明確な float が必要です。

w3s での float と clear の定義は次のとおりです: float: float 属性は、要素がどの方向にフロートするかを定義します。 C Clear: Clear 属性は、他の浮動要素が許可されるかどうかを要素の側面に設定します。

簡単な例 (コードは投稿しません :)):

これは、フローティングしてからフロートをクリア (clear:both) した後に達成されると予想される効果です。

フロートがクリアされない場合はどうなりますか?右側だけ掃除したらどうでしょうか?左側だけ掃除してみたらどうでしょうか?

clear:left 後の効果は予想どおりです。なぜこのような異なる結果が生じるのでしょうか?そして、なぜテキストは残っているのに色がなくなっているのでしょうか?

情報を確認し、友人に尋ねた後、私が望んでいた答えが得られました:

左右の部分が文書の流れから浮き上がり、上に誰もいないのを見ると尻尾の部分が自動的に頭の下を走ります (TAT ) 、ウキを掃除しなかったのでブリが見えないのはそのためです。では、なぜ最後にフォントが見えるのでしょうか?フローティングは絶対配置と

似ています

が、絶対配置と全く同じではありません。これはドキュメント フローから完全に外れ、引き続きドキュメント フローのコンテンツに影響を与えるため、テキストの説明が表示されます。 実際、不透明度属性を使用するだけで完全に理解できます。

クリア属性を使用しない場合、不透明度:0.5の状態は図のようになります。

(⊙o⊙)…多分それです。

初めてブログを書きます!初めてのブログです!初めてのブログです!大事なことは3回言いましょう。ああ、内容は非常にシンプルで初心者向けです。私は新卒で土木エンジニアとしての仕事を辞め、フロントエンドを学ぶ準備が整いました。フロントエンドをしっかり学びたいなら、もっとブログを読んで、もっとブログを書く必要があると聞きました。 、ということでここに来ました。ブログを書く習慣を身につけてみてください。

誰かがそれを見て(誰かが見るでしょうか?)後で文句を言いたくなった場合に備えて、間違いがあれば修正してください、ベテランからの指導、新人との交流を歓迎します!

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。