ホームページ >ウェブフロントエンド >フロントエンドQ&A >ブートストラップでフロートをクリアするためのクラス名は何ですか?
ブートストラップでフロートをクリアするためのクラス名は何ですか?
- WBOYオリジナル
- 2022-05-07 17:20:032570ブラウズ
ブートストラップで浮動小数点数をクリアするためのクラス名は、clearfix です。clearfix は、ブートストラップの補助クラスです。親要素に「.clearfix」を追加すると、浮動小数点数を簡単にクリアできます。構文は「<」です。 ;要素クラス="クリアフィックス">"。
clearfix と呼ばれます。
クリアする必要がある浮動要素の親要素に clearfix を追加するだけです。
Clearfix は、親要素に .clearfix を追加することで浮動小数点数を簡単にクリアするために使用されます。
構文は似ています:
<div class="clearfix">...</div>
例は次のとおりです:
test.html という名前の新しい HTML ファイルを作成して、ブートストラップでフロートをクリアするためにどのクラスを使用するかを説明します。リンク タグを使用して、bootstrap.min.css ファイルを読み込みます。
div タグ内で、div を使用して 2 行のテキストを作成します。 class 属性を外側の div に追加し、クラスを通じて幅を 350 ピクセル、高さを 100 ピクセル、背景色をグレーに設定します。
2 つの内部 div の前に別の div を追加し、それに明確な浮動クラス名clearfix を追加します。これにより、上部と下部の div のフローティングが相互に影響を与えなくなります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="js/bootstrap.min.css">
</head>
<body>
<style>
.mytest{
width:400px;
height:50px;
background:#ccc;
}
</style>
<div class="mytest">
<div class="pull-left">测试一</div>
<div class="clearfix"></div>
<div class="pull-left">测试二</div>
</div>
</body>
</html>ブラウザで test.html ファイルを開いて効果を確認します。
関連する推奨事項: ブートストラップ チュートリアル
以上がブートストラップでフロートをクリアするためのクラス名は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。