ホームページ  >  記事  >  ウェブフロントエンド  >  CSSでfloatをクリアする方法

CSSでfloatをクリアする方法

coldplay.xixi
coldplay.xixiオリジナル
2021-04-16 15:27:163265ブラウズ

CSS でフロートをクリアする方法は、clear 属性を使用してフローティング要素をクリアすることです。clear 属性は、要素のどの側にフローティング要素を含めることが許可されないかを定義します。コードは [img{float:left;クリア:両方;}]。

CSSでfloatをクリアする方法

このチュートリアルの動作環境: Windows7 システム、css3 バージョン、DELL G3 コンピューター。

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

CSS では、clear 属性を使用してフロートをクリアできます。 clear 属性は次のように導入されます。

clear 属性は、要素のどの側にフローティング要素を含めることが許可されないかを定義します。 CSS1 および CSS2 では、これはクリア要素 (つまり、clear プロパティが設定された要素) に上部マージンを自動的に追加することで実現されました。

CSS2.1では要素の上マージンの上にクリアスペースが追加されますが、マージン自体は変わりません。変更に関係なく、最終結果は同じです。左クリアまたは右クリアとして宣言されている場合、要素の上境界線は、その側のフローティング要素の下マージンのすぐ下になります。

属性値:

  • left 左側では浮動要素は許可されません。

  • #right フローティング要素は右側では許可されません。

  • 両方の浮動要素を左側と右側で使用することはできません。

  • none デフォルト値。フロート要素を両側に表示できるようにします。

  • inherit は、clear 属性の値を親要素から継承することを指定します。

clear 属性を使用して浮動要素をクリアします:

画像の左側または右側に浮動要素を使用することはできません:

<html>
<head>
<style type="text/css">
img
  {
  float:left;
  clear:both;
  }
</style>
</head>
<body>
<img  src="/i/eg_smile.gif" / alt="CSSでfloatをクリアする方法" >
<img  src="/i/eg_smile.gif" / alt="CSSでfloatをクリアする方法" >
</body>
</html>

レンダリング:

CSSでfloatをクリアする方法

#関連チュートリアルの推奨事項: CSS ビデオ チュートリアル

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

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