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>