float例項講解

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 ...