240 of 313 menu

clear プロパティ

プロパティclearは、 floatプロパティによって設定された 他の要素からの回り込みを解除します。 以下の値を取ることができます: none(自身の動作を無効にします)、 both(同時に左右両方のfloatを解除します)、 left(左側のfloatを解除します)、right( 右側のfloatを解除します)。

構文

セレクター { clear: none または left または right または both }

画像の左側へのテキストの回り込みを解除してみましょう:

<img class="image" src="bg.png" alt=""> <div class="txt"> <p> テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト </p> </div> .image { float: left; padding-right: 10px; } .txt { clear: left; }

:

次に、画像の右側へのテキストの回り込みを解除してみましょう:

<img class="image" src="bg.png" alt=""> <div class="txt"> <p> テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト </p> </div> .image { float: right; padding-right: 10px; } .txt { clear: right; }

:

clearプロパティ自体の動作を 無効にしてみましょう:

<img class="image" src="bg.png" alt=""> <div class="txt"> <p> テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト </p> </div> .image { float: right; padding-right: 10px; } .txt { clear: none; }

:

関連項目

  • プロパティbottom
    要素の下端の位置を設定します
  • プロパティtop
    要素の上端の位置を設定します
  • プロパティleft
    要素の左端の位置を設定します
  • プロパティright
    要素の右端の位置を設定します
  • 疑似要素::backdrop
    最初の要素の後に配置を設定します
  • プロパティcaption-side
    表のキャプションの位置を設定します
日本語
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItalianoქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
当サイトでは、サイトの動作、分析、パーソナライゼーションのためにクッキーを使用しています。 データ処理はプライバシーポリシーに従って行われます。
すべて受け入れる 設定 拒否