前端float如何用？float屬性詳細(xì)說明

一：float屬性

在前端中，很多人會使用float屬性去進(jìn)行圖文混排，但是對于新人都不知道float屬性是什么用，其實(shí)float屬性就兩個(gè)屬性，一個(gè)是左一個(gè)是右，left是表示該元素向左浮動，right表示該元素是向右浮動。在一般情況下，元素不會自己浮動的�！就扑]學(xué)習(xí)：HTML5在線手冊
】

例如:

 <title>CSS浮動float屬性</title>
    <style type="text/css">
       img{float:left;}
       p{font-size:16px;text-indent:28px;}
    </style>

顯示效果如下：

但是對于仔細(xì)的讀者就會發(fā)現(xiàn)，文本的頂部和圖片怎么不會水平居中呢，其實(shí)是這樣的，在瀏覽器中，p標(biāo)簽具有默認(rèn)的效果，就像我們看到strong就是看到了加粗一樣，如果想要圖片和文本保持一致的話，就要去除瀏覽器中的樣式，

二：如何利用float屬性設(shè)置圖片和文字的間距

當(dāng)文字圍繞在圖片周圍，和文字也有一定的距離，只要我們在圖片屬性中加一下屬性就可以了，代碼如下：

<style type="text/css">
       img{margin-right:20px;margin-bottom:20px;float:left;}
    </style>

在css中，float屬性是很重要的，在利用float的時(shí)候，我們經(jīng)常會對div使用float效果來布局，不僅對整個(gè)效果規(guī)劃，同時(shí)也是一些基本的元素進(jìn)行排列，

以上就是對前端float怎么用？float屬性詳解的全部介紹，如果你想了解更多有關(guān)Html5教程，請關(guān)注php中文網(wǎng)。

以上就是前端float怎么用？float屬性詳解的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！