99资源 在线视频|美女人妻自慰淫叫|日韩欧美乱伦电影|超碰按摩国产超碰|av全球免费不卡|加勒比无码一区人妻|国产高清一区视频高清|一区二区三区精品伊人|无码加勒比人妻高清|久草中文在线一区蜜乳

CSS浮動設(shè)置與清除

2016/9/22 8:36:00   閱讀:1570    發(fā)布者:1570

float:設(shè)置浮動

  浮動會使元素脫離普通文檔流,使元素向左或向右移動,其周圍的元素也會重新排布,
在布局中非常有用。
 

  html:

<p>以下是圖片的浮動設(shè)置:</p> 
<img src="image/follow-1.png"> 
<p>圖片后文字:注意&lt;p&gt;是塊級元素,元素前后有換行符。</p>

 

  不設(shè)置浮動時瀏覽器顯示如下:

  設(shè)置左浮動float:left;后瀏覽器顯示如下:

  設(shè)置右浮動float:right;后瀏覽器顯示如下:

 

 

 

clear:清除浮動

  當(dāng)有的元素不需要浮動時,但該元素周圍有浮動的元素時,可是設(shè)置clear屬性

  clear:left;消除左浮動  clear:right;消除右浮動  clear:both;消除兩邊浮動

  html:

 

<p>第一組圖片:</p> 
<img src="image/follow-1.png"> 
<img src="image/follow-2.png"> 
<p>第二組圖片:</p> 
<img src="image/follow-3.png"> 
<img src="image/follow-4.png"> 
<img src="image/follow-5.png">

  CSS:

img 
{ 
    float:left; 
}

  瀏覽器顯示如下:

  這樣顯得非常不美觀,這時可以設(shè)置clear:both;

  CSS:

img 
{ 
    float:left; 
} 
p 
{ 
    clear:both;     
}

  瀏覽器顯示如下:

 

  這樣顯得更加美觀好看,也由此可以看出浮動在布局中起到的作用。