float,clear

2024年01月16日(火) 09時35分更新 icon 項目のみ表示/展開表示の切り替え

概要

 floatを使うと指定した要素を左又は右に寄せて配置させ、次の要素をその反対側に回り込みさせることができます。
 floatを使い段組等に応用することができます。
 回り込みの解除には、clearを使用します。
 今回は、このホームページ自体がdivの塊でサイドメニューとメインコンテンツがすでに同様の手法で表示されていますので、サイドメニューの高さの影響を受けてしまいclearで解除されるのがサイドメニューの高さとなってしまいます。
 任意の場所でfloatを解除するためにoverflow属性でhiddenを指定して、不要な部分を非表示にしています。
 今回の例では左から右へと右から左の段組の2種類をテストしてみました。

線の太さ線種を指定(border,border-width)

1個目
2個目
1個目
2個目
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div style="width:100%; overflow: hidden;">
<div style="float:left; width:45%; border: 1px solid black;">
1個目
</div>
<div style="float:right; width:45%; border: 1px solid black;">
2個目
</div>
<div style="clear:both;">
</div>
</div>
<div style="width:100%; overflow: hidden;">
<div style="float:right; width:45%; border: 1px solid black;">
1個目
</div>
<div style="float:left; width:45%; border: 1px solid black;">
2個目
</div>
<div style="clear:both;">
</div>
</div>

</body>
</html>