CSS-浮動定位(float)、清除浮動(clear)

浮動定位(float)

float使用時機

<div>本身是區塊元素(block)，即使元素本身長度短於頁面行寬，仍會自動換行

<div class="box1">box1</div>
<div class="box2">box2</div>

.box1{
  width:200px;
  background: #F0C7B2;
  height:50px;
}
.box2{
  width:200px;
  background: #F0780D;
  height:50px;
}

若希望<div>元素可以並行排列，則需要使用float屬性

.box1{
  float:left;
}
.box2{
  float:left;
}

css語法解釋

float: 浮動方向;

浮動方向可以用的值有

• left（靠左浮動）
• right（靠右浮動）
• none（預設值，也就是不浮動）
• inherit（繼承自父層的屬性）

.box1{
  width:200px;
  background: #F0C7B2;
  height:50px;
  float:left;
}
.box2{
  width:200px;
  background: #F0780D;
  height:50px;
  float:right;
}

換行狀況

即使使用float定位，當排列元素的累積寬度已經超過頁面行寬，就會自動換行

.box1{
  width:200px;
  background: #F0C7B2;
  height:50px;
  float:left;
}
.box2{
  width:800px;
  background: #F0780D;
  height:50px;
  float:left;
}

清除浮動(clear)

使用時機

當前面的元素為浮動元素，後續的區塊元素會從父階層容器開始的地方堆疊起

<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>

.box1{
  width:200px;
  background: #F0780D;
  height:50px;
  float:left;
}
.box2{
  width:300px;
  background: #AEB6B8;
  height:50px;
  float:left;
}
.box3{
  width:100%;
  background: #F0C7B2;
  height:100px;
}

當後面的元素不想要有float的浮動效果時，為了避免重疊狀況，必須在最後一個浮動元素後方，增加一個元素，並使用clear屬性

<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="clearFloat"></div>
<div class="box3">box3</div>

.clearFloat{
  clear:both;
}