CSSでfloatをクリアする方法-CSSチュートリアル-php.cn

CSSでfloatをクリアする方法

coldplay.xixi

リリース： 2023-01-05 16:09:14

オリジナル

3208 人が閲覧しました

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をクリアする方法