前端float的使用方法

前端float的使用方法？這個(gè)問(wèn)題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見(jiàn)到的。希望通過(guò)這個(gè)問(wèn)題能讓你收獲頗深。下面是小編給大家?guī)?lái)的參考內(nèi)容，讓我們一起來(lái)看看吧！

一：float屬性

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

例如:

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

顯示效果如下：

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

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

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

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

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

感謝各位的閱讀！看完上述內(nèi)容，你們對(duì)前端float的使用方法大概了解了嗎？希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。