頭脳一式

人の記憶なんて曖昧なもの。すべての情報を頭に記憶するなんてナンセンス。困ったらここに来ればいいじゃん?というスタンスで最強のナレッジベースを目指すブログ

【CSS3】フロート(float)の仕組みを理解する

floatする前

まずはfloatする前のhtml,css,プレビュー。
横幅の大きさは150pxとする。
【プレビュー】

div1
div2
div3
div4

【html】

<div class="div">
  <div class="p" id="div1">div1</div>
  <div class="p" id="div2">div2</div>
  <div class="p" id="div3">div3</div>
  <div class="p" id="div4">div4</div>
</div>

css

.div{
  width:150px;
}
.p{
  height:50px;
  width:50px;
}

#div1 {
  background-color:red;
}
#div2 {
  background-color:blue;
  height:100px;
  width:100px;
}
#div3 {
  background-color:green;
}
#div4 {
  background-color:yellow;
}

div1要素にfloat:leftを設定する

div1要素にfloat:leftを設定するとdiv1要素が浮くため、後続div2以降の要素が上に詰まってしまう。
【プレビュー】

div1
div2
div3
div4

css(修正後)】

#div1 {
  background-color:red;
  float:left;
}

ちなみにこの状態でdiv1要素に対してopacity:0を指定すると裏に隠れているdiv2要素を見ることが出来る。
(透過させたい要素に対してopacity:0を指定)
【プレビュー】

div1
div2
div3
div4

CSS(opacity適用後)】

#div1 {
  background-color:red;
  float:left;
  opacity:0;
}

div2要素の回り込みを回避する。

overflow:hidden;を指定する方法

回り込んでしまったdiv2要素に対してoverflow:hidden;を指定すると次の挙動になる。 【プレビュー】

div1
div2
div3
div4

css(修正後)】

#div2 {
  background-color:red;
  float:left;
  height:100px;
  width:100px;
  overflow:hidden;
}

clear:both;を指定する方法

フロートが不要な箇所では clear:both;を指定することでfloat属性を解除することができる。
回り込んでしまったdiv2要素に対してclear:both;を指定すると次の挙動になる。
【プレビュー】

div1
div2
div3
div4

css(修正後)】

#div2 {
  background-color:red;
  height:100px;
  width:100px;
  clear:both;
}