HTMLで、「clear」という部分の質問です。

Question

jQueryの勉強をしていてHTMLのことで分からないことがあったので質問させていただきます。

<div class="wrapper-headerinfo">
	<div class="headerinfo">
		<div class="headerinfo-contents clear">
			<img src="images/header-info-img.png" width="300" height="120">
			<p>jQuero(ジェイクェロ)は、人にも自然にもやさしいソフトウェア開発に取り組むプロジェクトです。<br>
				事務所所在地<br>
				〒111-1111 東京都南区北台1-1-1</p>
		</div><!-- /.headerinfo-contents -->
	</div><!-- /.headerinfo -->
</div><!-- /.wrapper-headerinfo -->

このコードの中の上から3行目の、

<div class="headerinfo-contents clear">

この部分で「clear」というコードが書かれています。
この「clear」とはなんでしょうか？

ちなみにここにあたるCSSも記載しておきます。

.headerinfo-contents img {
	float: left;
	margin: 0 2.2727272% 10px 0;/* 2.2727272%（20px/880px）*/
}
.headerinfo p {
	padding: 20px 0 0 0;
	font-size: 0.8em;
	color: #fff;
}

ふと、、

float: left;

があることことから、「clearfix」の何かかと思いました。

しかし、HTMLに「clear」が書かれているので違うかなと思いました。

お分かりになる方教えていただけると嬉しいです。

Answer 1

デベロッパーツールで該当のclassにどのようなスタイルが割り当てられているのか
調べてみるとよろしいかと思います。

おそらくはご想像の通り「clearfix」のスタイルが割り当てられているか、
あるいは「clear:both;」が割り当てられているかのどちらかだと思われます。

他人が書いたソースやCSSフレームワークを利用しているなどで、
どのclassにどんなスタイルが割り当てられているか知りたい場合は
とりあえずデベロッパーツールでCSSを確認する癖をつけるとよいと思います。

Comments

[ShunYoshizawa]

回答ありががとうございます！

<div class="headerinfo-contents clear">
これはclassが二つ指定されているということでしょうか？

[aKusano]

はい、そうです。
classは半角スペースで区切って羅列することで複数設定できます。
マルチクラスという使い方になります。

[ShunYoshizawa]

ありがとうございます！