フローティング HTML をクリアする 6 つの方法を参考に例で紹介します。-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

フローティング HTML をクリアする 6 つの方法を参考に例で紹介します。

伊谢尔伦

Jul 20, 2017 am 09:58 AM

html 浮くクリア

display: inline-block を使用すると発生する状況:

1. ブロック要素を 1 行で表示する
2. インラインの幅と高さをサポートする
3. 改行が解析されない場合設定すると、幅はコンテンツによって決まります Open
5. ブロックタグは IE6 および 7 でサポートされます。ラップするときに inline-block 属性が解析されるため (ギャップがある)、解決策は float:left/ を使用することです。右
float を使用するときに発生する状況:
1. ブロック要素を 1 行で表示する
2. インライン要素を幅と高さをサポートするようにする
3. 幅と高さが設定されていない場合、幅はコンテンツによってサポートされます
4改行は解析されません (そのため、インライン要素を使用するときにギャップをクリアする方法はフロートを使用できます)
5. 要素がフローティングされている場合、要素は境界に達するまでドキュメントフローから切り離され、指定された方向に移動します。親または別のフローティング要素の停止 (ドキュメントフローとは、ドキュメント内で表示可能なオブジェクトが配置されるときに占有されるスペースです)この場合、親の margin: 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- を追加します (方法 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>

ログイン後にコピー

3. フローティング要素 height:0px;font-size:0;clear:both;} の下に

.clear{ を追加します。 IE6 では、ブロック要素には最小の高さがあります。つまり、高さが 19 ピクセル未満の場合、デフォルトは 19 ピクセルです。解決策は 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 を追加します。フローティング要素の下に all">

<!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>

ログイン後にコピー

を追加します。 5. {zoom:1;}

:after{content:"" をフローティング要素の親に追加します。 ; display:block;clear:both;}

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{margin:0 auto;border:10px solid #000;}
.p{ width:200px;height:200px;background:red;float:left;}
.clear{zoom:1;}
.clear:after{content:""; display:block;clear:both;}
/*
    清浮动
    1.给父级也加浮动
    2.给父级加display:inline-block
    3.在浮动元素下加<p class="clear"></p>
    .clear{ height:0px;font-size:0;clear:both;}
    4.在浮动元素下加<br clear="all"/>
    5. 给浮动元素的父级加{zoom:1;}
    :after{content:""; display:block;clear:both;}
    **在IE6，7下浮动元素的父级有宽度就不用清浮动
    haslayout 根据元素内容的大小 或者父级的父级的大小来重新的计算元素的宽高
  display: inline-block
  height: (任何值除了auto)
  float: (left 或 right)
  width: (任何值除了auto)
  zoom: (除 normal 外任意值) 
*/
</style>
</head>
<body>
<p class="box clear">
    <p class="p"></p>
</p>
</body>
</html>

ログイン後にコピー

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

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:300px;border:1px solid #000;overflow:auto;}
.p1{ width:260px;height:400px;background:Red;float:left;}
</style>
</head>
<body>
<p class="box">
    <p class="p1"></p>
</p>
</body>
</html>

ログイン後にコピー

を追加します。

以上がフローティング HTML をクリアする 6 つの方法を参考に例で紹介します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。