ホームページ > 記事 > ウェブフロントエンド > CSSでfloatをクリアする方法
CSSでfloatをクリアする方法
- coldplay.xixiオリジナル
- 2021-04-16 15:27:163272ブラウズ
CSS でフロートをクリアする方法は、clear 属性を使用してフローティング要素をクリアすることです。clear 属性は、要素のどの側にフローティング要素を含めることが許可されないかを定義します。コードは [img{float:left;クリア:両方;}]。
このチュートリアルの動作環境: 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 ビデオ チュートリアル
以上がCSSでfloatをクリアする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。