「CSS」clear プロパティのサンプル
説明
CSS の clear プロパティは、要素が先行する浮動要素の下に移動 (clear) する必要があるかどうかを設定します。
clear プロパティは、浮動要素と非浮動要素のどちらにも適用されます。
clear: left;要素は先行する 左の フロートと切り離され、下に移動します。
clear: right;要素は先行する 右の フロートと切り離され、下に移動します。
使用例
<style>
.cft {
/*float:left 要素は必ずその包含ブロックの左側に浮動*/
float: left;
height: 70px; width: 150px;
border: 1px solid #000;
background-color: skyblue;
}
/*clear:left 要素は先行する左のフロートと切り離され下に移動*/
.cftC {
clear: left;
}
</style>
<div class="cft">テスト</div>
<p class="cftA">項目1</p>
<p class="cftB">項目2</p>
<p class="cftC">項目3</p>
<style>
.cft {
/*float:left 要素は必ずその包含ブロックの左側に浮動*/
float: left;
height: 70px; width: 150px;
border: 1px solid #000;
background-color: skyblue;
}
/*clear:left 要素は先行する左のフロートと切り離され下に移動*/
.cftC {
clear: left;
}
</style>
<div class="cft">テスト</div>
<p class="cftA">項目1</p>
<p class="cftB">項目2</p>
<p class="cftC">項目3</p>
<style> .cft { /*float:left 要素は必ずその包含ブロックの左側に浮動*/ float: left; height: 70px; width: 150px; border: 1px solid #000; background-color: skyblue; } /*clear:left 要素は先行する左のフロートと切り離され下に移動*/ .cftC { clear: left; } </style> <div class="cft">テスト</div> <p class="cftA">項目1</p> <p class="cftB">項目2</p> <p class="cftC">項目3</p>