前端float怎麼用？ float屬性詳解

在網頁版面中，我們常會遇到文字和圖片結合的效果，也有的圖文混排，其實文字混排在網站上使用很多，也是比較廣泛的，那麼如何實現圖片混排，下面我們來講解float屬性？以及float怎麼用？

一：float屬性

在前端中，很多人會使用float屬性去進行圖文混排，但對於新人都不知道float屬性是什麼用，其實float屬性就兩個屬性，一個是左一個是右，left是表示該元素向左浮動，right表示該元素是向右浮動。在一般情況下，元素不會自己浮動的。 【推薦學習：HTML5線上手冊
】

例如:

#

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

顯示效果如下：

# #但是對於仔細的讀者就會發現，文字的頂部和圖片怎麼不會水平居中呢，其實是這樣的，在瀏覽器中，p標籤具有預設的效果，就像我們看到strong就是看到了加粗一樣，如果想要圖片和文字保持一致的話，就要去除瀏覽器中的樣式，

##二：如何利用float屬性設定圖片和文字的間距

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

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

在css中，float屬性是很重要的，在利用float的時候，我們經常會對div使用float效果來佈局，不僅對整個效果規劃，同時也是一些基本的元素進行排列，

# 以上就是對前端float怎麼用？ float屬性詳解的全部介紹，如果你想了解更多有關

Html5教程

，請關注php中文網。

以上是前端float怎麼用？ float屬性詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！