Float プロパティによる段組みの解除方法 - CSS

Float プロパティによる段組みの解除に関するコードを紹介します。

概要

CSSによるfloat解除のコードを紹介します。float解除の方法にはいくつか方法がありますが、この記事ではオーソドックスなblock要素でclearスタイルを指定して解除するコードを紹介します。

ブロック要素のclearで解除指定する

コード

下記のコードを記述します。

index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
  <link rel="stylesheet" href="CssClear.css" type="text/css" />
</head>
<body>
  <div>段組みの外です。</div>

  <div class="LeftColumn">
    左カラム<br/>
    あいうえお<br/>
   
  </div>
  <div class="RightColumn">
    右カラム<br />
    かきくけこ<br />
  </div>
  <div class="EndColumn"></div>

  <div>段組みの外です。</div> 

</body>
</html>

CssClear.css

.LeftColumn {
  float:left;
  width:320px;
  background-color:#c2dfff;
}

.RightColumn {
  float:left;
  width:320px;
  background-color:#aaffbb;
}

.EndColumn {
  clear:left;
}