第九篇 float浮動
阿新 • • 發佈：2017-09-25
默認 spa 寬度 空格 位移 hidden 選擇器 rod otto
float浮動
首先老師要聲明，浮動這一塊，和邊距、定位相比，它是比較難的，但是用它，頁面排版會更好。 這節課就直接上代碼，看著代碼去學浮動。 我們先弄一個div，給它一個背景顏色： HTML：<div id="div1">我是浮動div</div>CSS：
#div1{
background-color: aquamarine;
}
這裏同學們能看到，div1，它占據整行，有一個背景色。那麽我們先來看看給它設置一個float(浮動)屬性：
CSS：
#div1{ background-color: aquamarine; float: left; }這樣我們就讓div1成為了浮動，再刷新頁面，會發現，div1的寬度不在是占據整行了，而是變成內容有多大，它就有多大。那麽，還能設置它的寬度不呢？答案是能，我們用width來設置： CSS：
#div1{
width: 300px;
}
在div1的樣式裏再加一個寬度，就可以了，它一樣能占據更多的寬度，比如設置成"width:100%"，這句話的意思是，寬度為百分之百！就是說，它的父級有多寬，它就會有多寬，這裏我們沒給div設置什麽父親元素，它是寫在body下面的，所以body(整個瀏覽器)有多寬，它就有多寬。
它有什麽特點呢？我們再在div1下面加一個div2測試一下，div2我們不給任何樣式：<div>我是div2，沒有任何樣式</div>
然後去刷新頁面，會發現，div2它沒有跨行，而是在div1後面去了。這就是float最大的特性，它不像“絕對定位”一樣脫離文本，float它依舊存在文本裏的，不過它默認情況下，寬度是只有內容的寬度，所以會改變塊級元素的寬度(占據整行)。跟“相對定位”也有區別，相對定位會保留原本元素存在的位置，而它不會，我們可以使用外邊距margin來位移它的位置：
CSS：
#div1{
margin:80px 0 0 100px;
}
再次在div1裏面加樣式，能看到，div1發生了位移，那我們試一下，像“定位”一樣，用top或者left會不會有效果呢：#div1{
left:100px;
top:80px;
}
將margin改成以上代碼測試一下。同學們會發現，沒作用！那麽區別出來了，float要讓它產生位置變化，需要用到的是邊距，不能像定位一樣，直接使用left和top。那麽我們將代碼改回去，改成margin繼續。
我們能看到，div1使用了float移動位置過後，隨後的div2也跟著它後面像右側移動，“相對定位”的話，只會保留原本位置，自身移動不會影響其他元素，這裏的float對則對其他元素產生了影響。還能看出，他的高寬，也只有我們設置過的大小，左側和上方跟div1本身是沒有直接關系的。我們可以再加一個高來看出更明顯的效果：
CSS：
#div1{
height: 200px;
}
依舊是在div1裏加樣式，我們能看到div1的高寬，很明顯了吧！左側和上方空出來的部分，則是它使用外邊距移動過後留下的空白，那麽它究竟會不會影響其他元素呢，會！
我們給div2加一個ID為‘div2‘然後再加樣式：
HTML：
<div id="div2">我是div2，沒有任何樣式</div>CSS：
#div2{
margin:0 0 0 100px;
}
這樣的話，div2它原本應該是會距離左側100px對吧，但是它卻不移動，是因為什麽呢？那我們再給div2加一個背景色看看它究竟怎麽回事：
CSS：
#div2{
background-color: red;
}
給div2再加一個背景色，會看到，咦！它是占據整行的，關鍵是什麽，它確實離左側100px了，但是它基於的是瀏覽器左側，而不是div1，是因為div1是浮動，它雖然還在文本裏，但是它也跨了一個領域(就這樣解釋吧....多看看手冊裏怎麽解釋的哈，同學們)，它即影響其他元素，也又不影響，為什麽呢？同學們能看到，div2的內容是基於div1的，而寬卻是基於瀏覽器的。如果這樣做，就會很難控制了，為什麽呢，如果我們要div2距離div1有50px的距離，還要先清楚div1的寬和距離瀏覽器的距離，這樣的話，會讓人很難做的，很煩！那我們怎麽做呢？讓div2也成為float咯，先試試效果：
CSS：
#div2{
float: left;
}
給div2加一個浮動，然後在頁面上刷新能看到，它是基於div1的了，距離它100px了，而且寬度什麽的都被float改變了。很多同學不會很會運用它，是因為做的少，多嘗試，就能理解，老師就是這樣過來的。
有同學問，float這樣哪有什麽好的？還比邊距和定位難。那麽我們將float的值left換成right試試，加一個div3：
HTML：
<div id="div3">我是第三個div，我是浮動right</div>CSS：
#div3{
float: right;
}
能夠看到，div3就跑到瀏覽器的右側去了，是因為它的值為"right"，跑到右側去，這樣的話，我們拖動瀏覽器，它就會適應瀏覽器的寬度，永遠基於瀏覽器的右側，這樣的話，我們設置它發生位移，甚至是之後的“網頁自適應”也更好控制了。舉個例子：老師的瀏覽器寬度為1920px，我要讓某個div模塊在我頁面的最右側，難道我就用left然後這是它位移1920px嗎？那如果還要距離右側一點距離，老師還得一個px一個px或者大概的去估測，那不是很傻嗎。而用了right讓它基於右側，就跟左側一樣，我們來這樣玩一下：
CSS：
#div3{
margin:0 50px 0 0;
background-color: bisque;
}
老師總是給背景色，也是為了讓各位同學看得更加清楚。上面的代碼margin:0 50px 0 0;同學們明白嗎？之前的課程裏講過，4個值的順序是：top、right、bottom、left。那麽就是說，距離右側50px對吧。嗯....老師測試了一下，效果很明顯！
float一般會用在哪裏呢？我們不是經常逛商城嗎，淘寶、京東等，我們寫一個網頁，首先當然是分析了，那麽一個首頁怎麽寫？大概是這樣的：頂部、左側導航欄、右側內容。那麽我們就可以給頂部設置一個float設置成寬度100%，左側float比如寬度是20%，那麽右側內容的寬度則是80%。這樣的話， 三個作為父級元素，裏面的子孫後代也只好遵循他們的寬度。
老師給大家一個代碼，可以模擬一下效果看看：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>靜態布局</title> <style> div{ border: 1px solid red; margin: 2px; } .maindiv{ width: 1440px; margin: 0 auto; overflow: hidden; } .topcontent{ height: 80px; background-color: lightcyan; } .bottomcontent{ height: 120px; background-color: lightgoldenrodyellow; } .middlecontent{ overflow: hidden; } .middlecontent .midleft{ float: left; min-height: 500px; width: 160px; background-color: aqua; } .middlecontent .midright{ width: 1260px; height: 800px; display: inline-block; background-color: lightcoral; } </style> </head> <body> <div class="maindiv"> <div class="topcontent"></div> <div class="middlecontent"> <div class="midleft"></div> <div class="midright"></div> </div> <div class="bottomcontent"></div> </div> </body> </html>老師從最外層開始解釋： 先用一個div設置到最外層，做最高級的父親，裏面的內容都是它的子孫後代，給它設置一個固定寬度1440px，其後代就不會超過它的寬度，方便控制。margin:0 auto 的意思是，它距離頁面的邊距設置成0，默認情況下是有幾個px的，所以我們的內容總不是靠近瀏覽器，同學可以測試一下效果，auto是居中的意思，控制的是塊級元素居中哦。 CSS裏給每一個div設置了一個border邊框效果，margin的上下左右都有2px，給他們來一點小距離，區分。 然後我們說裏面的第一個div 它的class="topcontent"，即是頂部內容。因為div占據整行，它的父親1440px它也就有那麽大，給了一個寬度和背景色，好看效果。 最後一個div class="bottomcontent" 就是底部內容，它的樣式和頂部是一樣的，就是給個高度和背景色。 看中間的div class="middlecontent"，它裏面就設置了一個overflow:hidden，意思是什麽呢，比如它的高為100px，而你的內容太多，需要使用到120px，那麽超出的20px的內容將不會展現出來，換句話說，就是隱藏掉了，但它依舊存在這個div裏面的。它裏面包含了左側和右側，左側就比如是導航欄，右側就是內容： 老師CSS裏面寫的，也是一種選擇器的寫法，就是找到父元素：middlecontent 給出一個空格，然後找到下一個兒子，midleft，這裏面的樣式的意思是：左浮動、min-hight是最小高度、寬度、背景色；midright：寬度、高度、display:inline-block意思是行內塊元素、背景色 如果right裏面沒有display:inline-block，就會因為left裏的浮動所影響。 如果老師講的不夠清楚，歡迎各位同學給出意見。 註：浮動是真的好難講。要是面對面演講，那就好多了。 附加：span類行級元素加了float，會變成div類的塊級元素一般，能設置top和bottom等
第九篇 float浮動