css浮動float怎么用

這篇文章給大家分享的是有關css浮動float怎么用的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

　　一、float語法結構與小示例

　　1、float語法：

　　float : none | left |right

　　2、float參數值介紹：

　　float:none —— 對象不浮動

　　float:left —— 對象浮在左邊

　　float:right —— 對象浮在右邊

　　3、float值使用說明：

　　float屬性的值指出了對象是否及如何浮動。

　　當該屬性不等于none引起對象浮動時，對象將被視作塊對象(block-level)，即display屬性等于block。也就是說，浮動對象的display特性將被忽略。

　　4、css float結構分析圖

　　float屬性分析圖

　　5、float設置小示例：

　　.exp-a{ float: left }

　　.exp-b{ float: right }

　　float設置對象靠左(float:left)、靠右(float:right)，在div css布局中相當重要

　　二、float小實例

　　這里CSS5使用float設置兩個盒子一個靠左、一個靠右顯示，為了觀察到對象浮動靠左靠右效果，對其分別設置css 寬度、CSS 高度、CSS 邊框。

　　1、完整HTML CSS代碼

　　float屬性 小實例 CSS5

　　.exp{ width:500px; border:1px solid #333; padding:10px; overflow:hidden}

　　.exp-a{ float:left; width:200px; height:100px; border:1px solid #F00}

　　.exp-b{ float:right; width:260px; height:120px; border:1px solid #00F}

　　float實例CSS代碼解釋：

　　.exp{ width:500px; border:1px solid #333; padding:10px; overflow:hidden}

　　為了觀察到.exp對象里子級float靠左靠右浮動小DIV對象效果，設置了黑色邊框、寬度500px；padding避免內部子級貼近父級DIV，因為.exp內子級設置float，所以設置overflow:hidden讓.exp撐開。

感謝各位的閱讀！關于“css浮動float怎么用”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！