CSS 配置関連:float/clear属性

兄弟要素有

初期状態

child1
child2
child3

<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>

フロート解除有

child1
child2
child3

<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>

フロート解除無

child1
child2
child3

<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>

兄弟要素無

初期状態

child1
child2
child3

<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>

フロート解除有

child1
child2
child3

<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>

フロート解除無

child1
child2
child3

<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>

前の記事

CSS 文字属性