ホームページ >ウェブフロントエンド >htmlチュートリアル >クリアフィックスとは何ですか?
クリアフィックスとは何ですか?
- 王林転載
- 2023-08-26 19:53:121530ブラウズ
clearfix は、名前が示すように、float をクリアするために使用されます。通常、float レイアウトで使用されます。clearfix は、float をクリアするためのハックと考えられています。
オーバーフローの問題
Example
の中国語訳は次のとおりです:Example
解決策に進む前に、まず問題を見てみましょう。ここに画像があり、右側にフローティングされています。これは、それに属する要素よりもはるかに高いため、コンテナの外にオーバーフローします −
えー出力にはオーバーフローの問題が表示されます −
オーバーフロー自動を使用してフロートをクリアする問題を解決します
Example
の中国語訳は次のとおりです:Example
clearfix −
を使用して問題を修正しましょう えーフロートのクリアを修正するには::after セレクターを使用します
Example
の中国語訳は次のとおりです:Example
ここでは、clearfix を修正するために ::after セレクターが使用されています -
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid blue;
padding: 5px;
}
.myimg {
float: right;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<p>We haven't used clearfix below:</p>
<div>
<img class="myimg" src="https://www.tutorialspoint.com/machine_learning_with_python/images/machine-learning-with-python-mini-logo.jpg" alt="Machine Learning" style="max-width:90%" style="max-width:90%">
Etiam accumsan metus sapien, rutrum sagittis nunc posuere eu. Ut facilisis tortor eget justo
scelerisque, quis porta nisl sagittis.
</div>
</body>
</html>
以上がクリアフィックスとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事はtutorialspoint.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。