ホームページ > 記事 > ウェブフロントエンド > CSSでfloatをクリアする方法は何ですか?
CSSでfloatをクリアする方法は何ですか?
- 零下一度オリジナル
- 2017-06-30 10:47:131341ブラウズ
フローティング----現在のラベルが浮いて親ラベルの高さが崩れます
1. 親要素の高さを指定します
シンプルで粗野！高さは可変であり、内部の高さが親より大きい場合、問題が発生しやすくなります
3. overflow:hidden;zoom:1 または overflow:hidden;width:98% スタイルを親に追加します。 tag < ;div style="overflow:hidden;zoom:1"> div style="float:right">
他の
タグも使用できます。空のタグはコードを混乱させ、保守が難しく、コードの直感性が非常に悪いです
を自動的に取得できます。サイズを超えて非表示になる問題が発生するため、position と併用することはできません。
4.親タグにoverflow:autoを設定します
< / div>
基本的には3と同じですが、唯一問題となるのは、内部の高さが親よりも高い場合、ローラーが表示されることです
5. 親にfloatを追加します。要素でみんながひとつになる 全体のフローティングブロック
;div style="position:absolute;zoom:1">
5と繋がっています。元のテキスト フローから親要素を切り離すと同様の問題が発生する可能性がありますが、この方法を使用して解決できます
8 親タグの pseudo-class:after を定義し、zoom:1
。
.clearfix:after { 表示:ブロック; クリア:両方; コンテンツ:""; 可視性:非表示; 高さ:0}
以上がCSSでfloatをクリアする方法は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：ブラウザの互換性問題の分析例次の記事：ブラウザの互換性問題の分析例