今さら聞けない、float指定を解除する方法

HTMLやスタイルシートは相変わらず理解に乏しいのですが、ブログのレイアウト等をいじっていく上では、避けては通れないので、分からないなりにも、何とか対応してます。

で、今回の今さら聞けない話は、floatを解除する方法についてなんですが、この記事の内容は初心者の備忘録ですので、ご了承を。

まず、floatプロパティの左右の指定はこちらですね。

float: left;
float: right;

で、レイアウトにfloatプロパティを使ってボックスを配置した時、その後の内容まで回り込んできて、レイアウトが崩れたりすることがあるのですが、それを防ぐため、floatを解除する指定をしないといけないんですよね。

その方法がよく分からなかったので、今回は、以下のサイトを参考にさせていただきました。ありがとうございました。
-float(フロート)を解除する3つの方法-Whisper | Diary
floatを解除する手法のclearfix と 次世代のレイアウトの話|Web Design KOJIKA17

その方法は、まずはスタイルシートの指定がこちら。

.clear {
	clear:both;
}

で、HTMLに空のdivボックスを、floatで配置したボックスの後ろに追加します。

<div class="clear"></div>

これは、無駄な<div>の空ボックスを作ってしまうことになるようですが、初心者的には無難な方法かなと思い、これにて対応してます。

これで、float指定したボックス以降によるレイアウト崩れを防ぐことができると思います。

こうやって備忘録として書いておくのは、後から見返したりもするので、実は有効ですよね。