CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのClearプロパティを使用してFloatをオフにする

CSS clearプロパティを使用して、フローコンテンツをクリアするfloat要素の側を指定できます。

例

CSSのクリアプロパティの例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<title>CSS Clear</title>
<style type="text/css">
.clear {
   clear: left;
}
.yellow{
   background-color: #FF8A00;
}
.red{
   background-color: #F44336;
}
.green{
   background-color: #4CAF50;
}
p {
   float: left;
   margin: 10px;
   padding: 10px;
   color:white;
}
</style></head>
<body>
<p class="red">Important Notice</p>
<p class="clear red">Important Notice</p>
<p class="yellow">Mediocre Notice</p>
<p class="green">Ignorable Notice</p>
</body>
</html>

出力

これにより、次の出力が生成されます-

CSSのClearプロパティを使用してFloatをオフにする

例

CSSのクリアプロパティの別の例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<title>CSS Clear</title>
<style type="text/css">
p {
   float: left;
   margin: 10px;
   padding: 10px;
   color:white;
   background-color: #48C9B0;
   border: 4px solid #145A32;
}
p.noneFloat{
   float: none;
   clear: both;
   color: #34495E;
}
</style></head>
<body>
<p>I am okay with shared space</p>
<p class="noneFloat">I want a private space</p>
<p>I am also okay with shared space</p>
<p>Me too</p>
</body>
</html>

出力

これにより、次の出力が生成されます-

CSSのClearプロパティを使用してFloatをオフにする


  1. CSSを使用したフォントスタイリングの実用ガイド

    CSSは、フォントのスタイル設定において重要な役割を果たします。 CSSフォントプロパティを使用すると、font-family、font-size、font-weight、font-kerning、およびその他の多くのプロパティを変更できます。 CSSフォントプロパティは、font-style、font-variant、font-weight、font-size / line-height、およびfont-familyの省略形です。さらに、CSS text-shadow、text-stroke、text-fill-color、colorなどを使用したテキスト装飾によってテキストにスタイルを適用

  2. CSSを使用したクロスブラウザの不透明度の設定

    プロパティの不透明度は最新のソリューションであり、Firefox 0.9以降、Safari 2、Opera 9以降、IE 9以降、およびすべてのバージョンのChromeで機能します。 -moz-opacityプロパティは、0.9より古いFirefoxバージョンの不透明度プロパティです。–khtml-opacityプロパティは、1から始まるサファリバージョン用です。filterプロパティは、不透明度のような効果を与える5〜9のIEブラウザ用です。現代の不透明度のフォールバックとしてこれらすべての値を一緒に使用すると、すべてのブラウザで不透明度を使用できます。 以下は、CSSを使用してクロスブラ