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

平南網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)公司,平南網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為平南1000多家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站建設(shè)要多少錢，請找那個售后服務(wù)好的平南做網(wǎng)站的公司定做！

一、float語法結(jié)構(gòu)與小示例

1、float語法：

float : none | left |right

2、float參數(shù)值介紹：

float:none —— 對象不浮動

float:left —— 對象浮在左邊

float:right —— 對象浮在右邊

3、float值使用說明：

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

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

4、css float結(jié)構(gòu)分析圖

float屬性分析圖

5、float設(shè)置小示例：

.exp-a{ float: left }

.exp-b{ float: right }

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

二、float小實(shí)例

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

1、完整HTML CSS代碼

float屬性 小實(shí)例 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實(shí)例CSS代碼解釋：

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

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

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