HTML のフロートをクリアするためのいくつかの方法-htmlチュートリアル-php.cn

HTML のフロートをクリアするためのいくつかの方法

不言

リリース： 2018-06-25 09:30:22

オリジナル

2127 人が閲覧しました

この記事では、HTML 要素のフローティングを解除する 6 つの方法について説明します。詳細は以下を参照してください。

display: inline-block: を使用するとどうなるか

1. ブロック要素を 1 行で表示します。

2. 幅と高さのインラインサポートを有効にする

3. 改行が解析されます

4. 設定されていない場合、幅は IE6 および 7 以降でサポートされます

inline-block 属性が解析されるため行が途切れる（隙間がある）ため、解決策は float: left/right を使用することです

float: 使用時に発生する状況

1. ブロック要素を 1 つに表示します。 line

2. インライン要素の幅と高さをサポートするようにします

3. 幅と高さが同じでない場合、幅はコンテンツによって拡張されます
4. インライン要素を使用する場合、ギャップを埋めるためにフロートを使用できます)
5. 要素にフロートを追加すると、親の境界に到達するか、別のフローティング要素が停止するまで、ドキュメントフローから離れて指定された方向に移動します (ドキュメントフローがその位置にあります)。配置時にドキュメント内の表示可能なオブジェクトによって異なります)

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p,span{height:100px;background:red;border:1px solid #000; float:left;}
/*
inline-block
1.使块元素在一行显示
2.使内嵌支持宽高
3.换行被解析了
4.不设置宽度的时候宽度由内容撑开
5.在IE6,7下不支持块标签
浮动:
1.使块元素在一行显示
2.使内嵌支持宽高
3.不设置宽度的时候宽度由内容撑开
*/
</style>
</head>
<body>
<p class="p1">p1</p>
<p class="p2">p2</p>
<span class="span1">span1</span>
<span class="span2">span2</span>
</body>
</html>

ログイン後にコピー

次のコードは box1 のみを浮動させ、その後 box1 と box2 を重ね合わせます。両方がフローティングの場合、重なりはありません

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box1{ width:100px;height:100px;background:red; float:left;}
.box2{ width:200px;height:200px;background:blue; /* float:left;*/}
</style>
</head>
<body>
<p class="box1"></p>
<p class="box2"></p>
</body>
</html>

ログイン後にコピー

フロートをクリアする方法:

1. 親にフロートを追加します (この場合、親のマージンが 0 auto;)

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:300px;margin:0 auto;border:10px solid #000; float:left;}
.p{ width:200px;height:200px;background:red;float:left;}
/*
    清浮动
    1.给父级也加浮动(不居中了)
*/
</style>
</head>
<body>
<p class="box">
    <p class="p"></p>
</p>
</body>
</html>

ログイン後にコピー

2. display:inline-block; を親に追加します (方法 1 と同じですが、中央揃えではありません。IE6 と 7 のみが中央揃えになります)

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:300px;margin:0 auto;border:10px solid #000; display:inline-block;}
.p{ width:200px;height:200px;background:red;float:left;}
/*
    清浮动
    1.给父级也加浮动
    2.给父级加display:inline-block
*/
</style>
</head>
<body>
<p class="box">
    <p class="p"></p>
</p>
</body>
</html>

ログイン後にコピー

フローティング要素の下

.clear{ height:0px;font-size:0;clear:both;} ただし、IE6 では、ブロック要素には最小の高さがあります。つまり、高さが 19px 未満の場合、デフォルトは 19px です。解決策: font-size: 0; または overflow:hidden;

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:300px;margin:0 auto;border:10px solid #000;}
.p{ width:200px;height:200px;background:red;float:left;}
.clear{ height:0px;font-size:0;clear:both;}
/*
    清浮动
    1.给父级也加浮动
    2.给父级加display:inline-block
    3.在浮动元素下加<p class="clear"></p>
    .clear{ height:0px;font-size:0;clear:both;}
*/
</style>
</head>
<body>
<p class="box">
    <p class="p"></p>
        <p class="clear"></p>
</p>
</body>
</html>

ログイン後にコピー

4. フローティング要素の下に

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:300px;margin:0 auto;border:10px solid #000;}
.p{ width:200px;height:200px;background:red;float:left;}
/*
    清浮动
    1.给父级也加浮动
    2.给父级加display:inline-block
    3.在浮动元素下加<p class="clear"></p>
    .clear{ height:0px;font-size:0;clear:both;}
    4.在浮动元素下加<br clear="all"/>
*/
</style>
</head>
<body>
<p class="box">
    <p class="p"></p>
    <br clear="all"/>
</p>
</body>
</html>

ログイン後にコピー

を追加します。 1;}

を浮動要素の親に追加します

:after{content:""; display:block;clear:both;}

ログイン後にコピー





无标题文档

ログイン後にコピー

6. 浮動要素の親に overflow:auto;

を追加します。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

関連する推奨事項:

HTML を使用して右クリックメニューと左クリックスワイプ機能をブロックする方法

HTML テキストの書式設定コードについて

以上がHTML のフロートをクリアするためのいくつかの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。