CSS 配置関連：float/clear属性
兄弟要素有
初期状態
<div id="parent1" class="box">
<div id="child1" class="box">child1</div>
<div id="child2" class="box">child2</div>
<div id="child3" class="box">child3</div>
</div>
<style>
#parent1 {
width: 80%;
}
#child1 {
width: 30%;
background-color: red;
}
#child2 {
width: 30%;
background-color: green;
}
#child3 {
background-color: blue;
}
.box {
border:1px solid #888;
color: white;
}
</style>
フロート解除有
<div id="parent2" class="box">
<div id="child1" class="box">child1</div>
<div id="child2" class="box">child2</div>
<div id="child3" class="box">child3</div>
</div>
<style>
#parent2 {
width: 80%;
}
#parent2 #child1 {
float: left;
}
#parent2 #child2 {
float: right;
}
#parent2 #child3 {
clear: both;
}
</style>
フロート解除無
<div id="parent3" class="box">
<div id="child1" class="box">child1</div>
<div id="child2" class="box">child2</div>
<div id="child3" class="box">child3</div>
</div>
<style>
#parent3 {
width: 80%;
}
#parent3 #child1 {
float: left;
}
#parent3 #child2 {
float: right;
}
#parent3 #child3 {
解除しない
}
</style>
兄弟要素無
初期状態
<div id="parent4" class="box">
<div id="child1" class="box">child1</div>
<div id="child2" class="box">child2</div>
</div>
<div id="child3" class="box">child3</div>
<style>
#parent4 {
width: 80%;
}
#child1 {
width: 30%;
background-color: red;
}
#child2 {
width: 30%;
background-color: green;
}
.box {
border:1px solid #888;
color: white;
}
</style>
フロート解除有
<div id="parent5" class="box clearfix">
<div id="child1" class="box">child1</div>
<div id="child2" class="box">child2</div>
</div>
<div id="child3" class="box">child3</div>
<style>
#parent5 {
width: 80%;
}
#parent5 #child1 {
float: left;
}
#parent5 #child2 {
float: right;
}
.clearfix:after {
content: "";
display: block;
clear: both;
}
</style>
フロート解除無
<div id="parent6" class="box">
<div id="child1" class="box">child1</div>
<div id="child2" class="box">child2</div>
</div>
<div id="child3" class="box">child3</div>
<style>
#parent6 {
width: 80%;
}
#parent6 #child1 {
float: left;
}
#parent6 #child2 {
float: right;
}
</style>
