浮動

1.文字向右浮動
浮動後，原來的「坑」就讓出來了
而且是在原來的高度的基礎上，向右浮動。

<style>
.f{
  float:right;
}
 
</style>
 
<div >正常文字1</div>
<div >正常文字2</div>
<div class="f">浮動的文字</div>
<div >正常文字4</div>
<div >正常文字5</div>

 

正常文字1

正常文字2                                                                                                                                                                                                                                                                                                             浮動的文字

正常文字4

正常文字5

 

2.文字向左浮動 
首先，向左浮動後，會把「坑」讓出來，這個時候"正常的文字4「 就會過來試圖佔這個坑，可是，發現 「浮動的文字」並無走，結果，就只好排在它後面了。

<style>
.f{
  float:left;
}
 
</style>
 
<div >正常文字1</div>
<div >正常文字2</div>
<div class="f">浮動的文字</div>
<div >正常文字4</div>
<div >正常文字5</div>

 

正常文字1

正常文字2

浮動的文字

正常文字4

正常文字5

 

3.文字圍繞圖片

<style>
.f{
  float:left;
}

div{
  width:320px;
}
</style>

<div >
 <img src="http://how2j.cn/example.gif"/>

<p>  當圖片不浮動時，文字就會換行出如今下面
  當圖片不浮動時，文字就會換行出如今下面
  當圖片不浮動時，文字就會換行出如今下面
  當圖片不浮動時，文字就會換行出如今下面
  當圖片不浮動時，文字就會換行出如今下面
  當圖片不浮動時，文字就會換行出如今下面
</p>
</div>

<div >
 <img  class="f" src="http://how2j.cn/example.gif"/>

<p>  當圖片浮動時，文字圍繞着圖片
 當圖片浮動時，文字圍繞着圖片
 當圖片浮動時，文字圍繞着圖片
 當圖片浮動時，文字圍繞着圖片
 當圖片浮動時，文字圍繞着圖片
</p>
</div>

 

當圖片不浮動時，文字就會換行出如今下面 當圖片不浮動時，文字就會換行出如今下面 當圖片不浮動時，文字就會換行出如今下面 當圖片不浮動時，文字就會換行出如今下面 當圖片不浮動時，文字就會換行出如今下面 當圖片不浮動時，文字就會換行出如今下面

當圖片浮動時，文字圍繞着圖片 當圖片浮動時，文字圍繞着圖片 當圖片浮動時，文字圍繞着圖片 當圖片浮動時，文字圍繞着圖片 當圖片浮動時，文字圍繞着圖片

 

4.文字不想圍繞圖片（clear）

不容許出現浮動元素 
屬性:clear 
值: left right both none 
若是p左邊出現了浮動的元素，如此例，則設置clear:left 即達到不容許浮動元素出如今左邊的效果

<style>
.f{
  float:left;
}

div{
  width:320px;
}

.clearp{
  clear:left;
}

</style>

<div >
 <img  class="f" src="http://how2j.cn/example.gif"/>

<p>  當圖片浮動時，文字圍繞着圖片
 當圖片浮動時，文字圍繞着圖片
 當圖片浮動時，文字圍繞着圖片
 當圖片浮動時，文字圍繞着圖片
 當圖片浮動時，文字圍繞着圖片
</p>
</div>

<div >
 <img  class="f" src="http://how2j.cn/example.gif"/>

<p class="clearp">  當圖片浮動時，文字卻不想圍繞圖片
當圖片浮動時，文字卻不想圍繞圖片
當圖片浮動時，文字卻不想圍繞圖片
當圖片浮動時，文字卻不想圍繞圖片

</p>
</div>

 

 

 

當圖片浮動時，文字圍繞着圖片 當圖片浮動時，文字圍繞着圖片 當圖片浮動時，文字圍繞着圖片 當圖片浮動時，文字圍繞着圖片 當圖片浮動時，文字圍繞着圖片

當圖片浮動時，文字卻不想圍繞圖片 當圖片浮動時，文字卻不想圍繞圖片 當圖片浮動時，文字卻不想圍繞圖片 當圖片浮動時，文字卻不想圍繞圖片

 

5.水平排列div

默認的div排列是會換行的 
若是使用float就能夠達到水平排列的效果，一般會用在菜單，導航欄等地方 
若是超出了父容器，還會有自動換行的效果

 

<style>
div#floatingDiv{
  width:200px;
}
div#floatingDiv div{
   float:left;
}
</style>
默認的div排列是會換行的
 
 <div>
       菜單1
 </div>
 <div>
       菜單2
 </div> 
 <div>
       菜單3
 </div>
 
若是使用float就能夠達到水平排列的效果，一般會用在菜單，導航欄等地方
 
若是超出了父容器，還會有自動換行的效果
 
<div id="floatingDiv">
  <div>
       菜單1
 </div>
 <div>
       菜單2
 </div> 
 <div>
       菜單3
 </div>
 <div>
       菜單4
 </div>
 <div>
       菜單5
 </div>
 <div>
       菜單6
 </div>
</div>