前端float的使用方法

發布時間：2020-09-26 15:09:14 來源：億速云閱讀：163 作者：小新欄目：web開發

前端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>

顯示效果如下：

前端float的使用方法

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

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

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

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

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

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

向AI問一下細節

中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站