css3でfloatをクリアするコードは何ですか-フロントエンドQ&A-php.cn

css3でfloatをクリアするコードは何ですか

WBOY

リリース： 2022-04-11 18:37:25

オリジナル

4470 人が閲覧しました

コードは次のとおりです: 1. ".clear{clear:both}"、要素が左右にフロートしないことを規定します; 2. "overflow:auto"、フローティングをクリアするためにトリミングされるコンテンツを設定します; 3. 「要素: after{display:table;}」では、要素をブロックレベルのテーブルとして表示するように設定し、残りのスペースが埋まったときにフロートをクリアします。

css3でfloatをクリアするコードは何ですか

このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css3 でフロートをクリアするためのコードは何ですか

方法 1: クリア属性を持つ空の要素を使用します

空のタグを使用してクリアしますfloats : float をクリアするためにクリアする必要がある親要素内のすべてのフローティング要素の後に空のタグ (理論的には任意のタグにすることができますが、

と

が一般的に使用されます) を追加し、CSS を定義しますコードは明確です: 両方。

コード例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.demo{
width: 500px;
margin: 50px auto;
background-color: #CCCCCC;
}
.left{
width: 100px;
height: 100px;
float: left;
background-color: #21B4BB;
}
.right{
width: 100px;
height: 50px;
float: right;
background-color: #21B4BB;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div class="demo">
<div class="left">left</div>
<div class="right">right</div>
<div class="clear"></div>
</div>
</body>
</html>

ログイン後にコピー

利点: シンプル、コードが少なく、ブラウザーとの互換性が良好。

欠点: 多数の非セマンティックな HTML 要素を追加する必要があり、コードは十分に洗練されておらず、後で保守するのは簡単ではありません。

方法 2: CSS のオーバーフロープロパティを使用します。

オーバーフローを使用してフロートをクリアします。CSS コード overflow:auto または overflow:hidden を要素内で定義するだけです。 float をクリアする必要があります。

コード例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.demo{
width: 500px;
margin: 50px auto;
background-color: #CCCCCC;
overflow:hidden
}
.left{
width: 100px;
height: 100px;
float: left;
background-color: #21B4BB;
}
.right{
width: 100px;
height: 50px;
float: right;
background-color: #21B4BB;
}
</style>
</head>
<body>
<div class="demo">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>

ログイン後にコピー

メリット: 構造的、意味的に問題がなく、コード量が非常に少ない

デメリット: コンテンツが増えた場合、簡単自動行折り返しを実行し、コンテンツが非表示になり、オーバーフローする必要がある要素を表示できなくなります。

方法 3: CSS の :after 疑似要素を使用します。

親要素に :after 疑似要素を使用し、 display:table を設定します。

display:table を使用すると、生成された要素がブロックレベルのテーブルに表示され、残りのスペースが占有されます。

content: " " を通じて最後の要素としてコンテンツを生成します。コンテンツ内のコンテンツに関しては、何でも構いません。古典的な CSS は content: "." です。一部のバージョンでは、コンテンツ内のコンテンツは次のとおりです。空の。

コード例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.demo{
width: 500px;
margin: 50px auto;
background-color: #CCCCCC;
*zoom: 1;
}
.demo:after { 
content: " ";
display: table; 
clear: both;  
}  
.left{
width: 100px;
height: 100px;
float: left;
background-color: #21B4BB;
}
.right{
width: 100px;
height: 50px;
float: right;
background-color: #21B4BB;
}
</style>
</head>
<body>
<div class="demo">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>

ログイン後にコピー

欠点: 最新のブラウザに適していますが、IE6/7 はサポートしていません。*zoom: 1 は IE6/7 と互換性があります

(学習ビデオ共有: css ビデオチュートリアル )

以上がcss3でfloatをクリアするコードは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。