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>