ページ内のフロートとクリアの概要
I. float: 主な目的は、画像の列の周りにテキストを配置する効果を得ることです。
また、マルチカラムレイアウトを作成する最も簡単な方法となります。
<img src= " " />
<p>text content paragraph content text content paragraph content text content paragraph content text content paragraph content text content paragraph content</p>
[1] テキスト回り込み画像
p {margin: 0; border: solid 1px;}
img {float: left;}
[2] マルチカラムレイアウトを作成する
p {margin: 0; border: solid 1px; width: 200px; float: left;}
img {float: left;}
第二に、フローティング要素は、文書の流れの外にあり、その親要素は、それが彼を囲むことはありませんので、彼を見ることができない、それは子要素が高さを有することが表示され、親要素は、我々がしたい時間ではありません突っ張られることはありません
の下に 3つの解決方法 状況に照らし合わせて、賢く応用してください。
<section>
<img src=" />
<p> This is paragraphThis is paragraphThis is paragraphThis is paragraphThis is paragraphThis is paragraphThis is paragraph</p>
</section>
<footer> this is the bottom this is the bottom this is the bottom this is the bottom this is the bottom this is the bottom this is the bottom </footer>
section , footer {border: solid 1px;}
img {float: left;}
[1] 親要素にoverflow: hiddenを追加し、親要素がフローティング要素を囲むようにする。
この宣言の本当の目的は、親要素が特大のコンテンツによって拡散されるのを防ぐことです。overflow: hidden を適用しても、親要素は設定された幅を維持し、特大の子要素はコンテナによって切り取られます。
さらに、overflow: hiddenは、親要素がその浮遊する子要素を確実に含むように強制する効果も持っています。
は、ドロップダウンメニューを使用するトップレベル要素では使用できません。そうでなければ、その子であるドロップダウンメニューは表示されません。
[2] 親要素をフローティングさせながら、ブラウザの幅と同じ100%の幅で、フッターにクリアフロートを設定し、フッターがセクションの隣に圧迫されないようにする。 {フォント
section {border: solid 1px; float: left; width:100%}
footer {border: solid 1px; clear: left}
img {float: left;}
外側のマージンに対して自動的にセンタリングされる要素には使用できません。そうでない場合は、中央揃えされなくなる。
[3] フローティングでないクリア要素（擬似要素）の追加
.clearfix: after {
content: "";
display: block ;
height: 0
visibility: hidden;
clear : both
}
第三に、親要素がない場合のクリア方法（グループとしてのimg p , 親要素なし）。
<section> <img src=" /> <p class="clearfix">text content paragraph content text content paragraph content text content paragraph content text content paragraph content text content paragraph content</p> <img src=" /> <p class="clearfix">text content paragraph content text content paragraph content paragraph content text content paragraph content paragraph content text content paragraph content </p> <img src=" /> <p class="clearfix">text content paragraph content text content paragraph content text content paragraph content text content paragraph content text content paragraph content</p> </section>
以上、本記事の内容が皆様の勉強や仕事に少しでもお役に立てれば幸いです。また、より多くのスクリプトホームをサポートできれば幸いです。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン