BinaryDevelop
  1. ホーム
  2. Web制作
  3. HTML/Xhtml

HTMLがフロートをクリアする2つの方法

2022-01-07 12:27:40

I. フロートをクリアする一つの方法

直前の親要素の高さを設定します。注意：企業での開発では、できれば高さを指定しないでください。 

image.setImageURI(null)
image.setImageURI(Uri.fromFile(File(path)))

2つ目は、フロートをクリアする方法です

以下の属性にclear属性を追加します。

clear属性は、以下の値をとります。

none: デフォルト値。フローティング要素のソート規則に従ってソートされます (left float は left float を、right float は right float を探します)。

左：直前の左フロート要素を探さない

right: 直前の right float 要素を探さない。

both: 前にある左浮きと浮きの要素を探さない

たとえば、大きなボックスの幅と高さを設定しない場合、小さなボックスが大きなボックスを支えることになりますが、結果として2つの大きなボックスが1行になることになります 

 .smallbox1{
            width:100px;
            height: 100px;
            float:left;
            background-color: red;
            border:2px solid black;
        }
        .smallbox2{
            width:100px;
            height: 100px;
            float:left;
            background-color: red;
            border:2px solid black;
        }
        .smallbox3{
            width:100px;
            height: 100px;
            float:left;
            background-color:blue;
            border:2px solid black;
        }
        .smallbox4{
            width:100px;
            height: 100px;
            float:left;
            background-color: blue;
            border:2px solid black;
        }
    </style>
</head>
<body>
<div class="bigbox1">
    <div class="smallbox1"></div>
    <div class="smallbox2"></div>
</div>
<div class="bigbox2">
    <div class="smallbox3"></div>
    <div class="smallbox4"></div>
</div>
</body>

3番目の小ボックスにclear属性を使用して、別の行になるようにしています（4番目ではなく、3番目の小ボックスが4番目の隣にあればよいので）、3番目の小ボックスのコードを変更するだけでよいのです。 

      .smallbox3{
            clear:left;
            width:100px;
            height: 100px;
            float:left;
            background-color:blue;
            border:2px solid black;
        }

注：margin属性は無効になっています。無効にしない方法については、次回に説明します。

3つ目は、ソースコードです。

D131_ClearFloat.html

D132_CLearAttribute.html

アドレス

https://github.com/ruigege66/HTML_learning/blob/master/D131_ClearFloat.html

https://github.com/ruigege66/HTML_learning/blob/master/D132_CLearAttribute.html

概要

以上、2つの方法のうち、どちらかのフロートをクリアするためのHTMLの小さな紹介でしたが、お役に立てれば幸いです。もし何かご質問があれば、私にメッセージをください、迅速に皆さんに返信します。また、スクリプトハウスのウェブサイトを応援していただき、ありがとうございます。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します