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

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

floatする前

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

div1
div2
div3
div4
<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>
.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
#div1 {
    background-color:red;
    float:left;
}

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

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

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

overflow:hidden;を指定する方法

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

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

clear:both;を指定する方法

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です