overflow:hiddenを使用したfloat解除と使用しないfloat解除のサンプル
overflow:hidden使用
overflow:hidden未使用
<h2>overflow:hidden使用</h2>
<div class="box">
<i></i>
<div class="a"></div>
<div class="b"></div>
</div>
<hr>
<h2>overflow:hidden未使用</h2>
<div class="box2 clearfix">
<i></i>
<div class="a"></div>
<div class="b"></div>
</div>
.box {
overflow: hidden;
position: relative;
width: 100px;
background: gray;
}
.box2 {
position: relative;
width: 100px;
background: gray;
}
.a {
float: left;
width: 50px;
height: 50px;
background: red;
}
.b {
float: right;
width: 30px;
height: 50px;
background: blue;
}
i {
display: block;
position: absolute;
top: -5px;
left: -5px;
width: 10px;
height: 10px;
border-radius: 50%;
background: green;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
/* SASSを使用しているならmixinを作成して
@include clearfixで読み込む
Compassの@include clearfixは
overflow: hiddenを読み込むので使用しない。
@mixin clearfix {
&::after {
content: "";
display: block;
clear: both;
}
}
.foo {
@include clearfix;
}
*/