float例項講解

2022-07-30 01:03:15 字數 1561 閱讀 6798

float是個強大的屬性,在實際前端開發過程中,人們經常拿它來進行布局,但有時,使用的不好,也麻煩多多啊。

比如,現在我們要實現乙個兩列布局,左邊的列,寬度固定;右邊的列,寬度自動擴充套件。

效果圖見下:

思路:利用div+float,div1為左邊的列,div2為右邊的列,將div1的寬度設定為固定寬度並將其設定為左浮動,脫離文件流;div2在普通流中就ok了。

具體**和效果圖見下:

咋眼一看,還真是的,當你將瀏覽器的寬度手動變換時,div1寬度固定,div2寬度也是自適應。

但是,如果我在div2中加入一些內容呢?

如將寬高為100px的藍色div作為div2的子元素,我們再來看看效果。

我靠,這不是和上面一樣嗎,我的藍色div呢?!!

開啟chrome偵錯程式,看看什麼狀況

原來我編寫的div3是在文件流中的,只是被div1遮擋了。

怎麼會這樣呢?

那是因為浮動後的元素會脫離文件流,也就是div2以為div1不在文件流一樣,所以div2就會忽略div1的存在,展現自己,但是div1浮動後,是在文件流的上層的,所以,div1就會遮蓋住它下面的正常文件流啦。

咦,那我們要怎麼做,才能讓div3顯示在可見的div2中呢?

如下圖所示效果

如果單單呈現如上效果,可以將div3的display設定為inline-block。不信,你自己執行下**試試。

下面是改好的**

view code

為什麼會這樣呢?

那是因為float出現的初始目的就是讓文字環繞浮動元素,及內聯元素環繞浮動元素。

所以,如果你將div3去掉,換成大量的文字(足以包裹div1),再將div2的高度設定得比div1高一點,手動改變瀏覽器的寬度,漸漸地,你會發現文字環繞著div1的效果了。

見下圖view code

倘若我想在div2中加入塊級元素呢?也就是我想讓div1和div2成為兩個互不干擾的模組,往裡面新增內容時,無影響,怎麼辦呢?

那麼我們可以利用margin或則padding。將div2(自適應寬度)的margin-left或者padding-left設定為div1(固定寬度)的大小就可以了。這裡我設定的是margin-left。

float例項講解

float是個強大的屬性,在實際前端開發過程中,人們經常拿它來進行布局,但有時,使用的不好,也麻煩多多啊。比如,現在我們要實現乙個兩列布局,左邊的列,寬度固定 右邊的列,寬度自動擴充套件。效果圖見下 思路 利用div float,div1為左邊的列,div2為右邊的列,將div1的寬度設定為固定寬度...

SQL Create Table例項講解

在本教程中,將學習如何使用sqlcreate table語句來建立新錶。1.sql create table語句簡介 到目前為止,我們已經了解了資料庫中的表是什麼。現在,是時候學習如何建立表了。表是儲存在資料庫中的資料集合。表由列和行組成。要建立新錶,請使用具有以下語法的create table語句...

SQL Rename Table例項講解

sqlrename table用於更改表的名稱。有時,表的名稱沒有意義或因為一些其它原因需要更改。重新命名資料庫中表的語法。alter table table name rename to new table name 可以編寫以下命令來重新命名表 可選 rename old table name ...