float实例讲解
float實例講解
float是個強大的屬性，在實際前端開發過程中，人們經常拿它來進行布局，但有時，使用的不好，也麻煩多多啊。
比如，現在我們要實現一個兩列布局，左邊的列，寬度固定；右邊的列，寬度自動擴展。
效果圖見下：
思路：利用div+float，div1為左邊的列，div2為右邊的列，將div1的寬度設置為固定寬度并將其設置為左浮動，脫離文檔流；div2在普通流中就ok了。
具體代碼和效果圖見下：
<!DOCTYPE html><head><title>width_layout</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"/><style type="text/css">.content {min-width:300px;}.div1 {width:200px;height:300px;background:green;float:left;}.div2 {height:300px;background:pink;}</style></head><body><div class="content"><div class="div1"></div><div class="div2"></div></div></body> </html>咋眼一看，還真是的，當你將瀏覽器的寬度手動變換時，div1寬度固定，div2寬度也是自適應。
但是，如果我在div2中加入一些內容呢？
如將寬高為100px的藍色div作為div2的子元素，我們再來看看效果。
我靠，這不是和上面一樣嗎，我的藍色div呢？！！
打開chrome調試器，看看什么狀況
原來我編寫的div3是在文檔流中的，只是被div1遮擋了。
怎么會這樣呢？
那是因為浮動后的元素會脫離文檔流，也就是div2以為div1不在文檔流一樣，所以div2就會忽略div1的存在，展現自己，但是div1浮動后，是在文檔流的上層的，所以，div1就會遮蓋住它下面的正常文檔流啦。
咦，那我們要怎么做，才能讓div3顯示在可見的div2中呢？
如下圖所示效果
?
如果單單呈現如上效果，可以將div3的display設置為inline-block。不信，你自己運行下代碼試試。
下面是改好的代碼
<!DOCTYPE html><head><title>width_layout</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"/><style type="text/css">.content {min-width:300px;}.div1 {width:200px;height:300px;background:green;float:left;}.div2 {height:300px;background:pink;}.div3 {width:100px;height:100px;display:inline-block;background:blue;}</style></head><body><div class="content"><div class="div1"></div><div class="div2"><div class="div3"></div></div></div></body> </html>為什么會這樣呢？
那是因為float出現的初始目的就是讓文字環繞浮動元素，及內聯元素環繞浮動元素。
所以，如果你將div3去掉，換成大量的文字（足以包裹div1），再將div2的高度設置得比div1高一點，手動改變瀏覽器的寬度，漸漸地，你會發現文字環繞著div1的效果了。
見下圖
<!DOCTYPE html><head><title>width_layout</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"/><style type="text/css">.content {min-width:300px;}.div1 {width:200px;height:300px;background:green;float:left;}.div2 {height:500px;background:pink;}</style></head><body><div class="content"><div class="div1"></div><div class="div2">豫章故郡，洪都新府。星分翼軫，地接衡廬。襟三江而 帶五湖，控蠻荊而引甌越。物華天寶，龍光射牛斗之墟；人杰地靈，徐孺下陳蕃之榻。雄州霧列，俊采星馳。臺隍枕夷夏之交，賓主盡東南之美。都督閻公之雅望，棨戟遙臨；宇文新州之懿范，襜帷暫駐。十旬休假，勝友如云；千里逢迎，高朋滿座。騰蛟起鳳，孟學士之詞宗；紫電青霜，王將軍之武庫。家君作宰，路出名區；童子何知，躬逢勝餞。時維九月，序屬三秋。潦水盡而寒潭清，煙光凝而暮山紫。儼驂騑于上路，訪風景于崇阿。臨帝子之長洲，得仙人之舊館。層巒聳翠，上出重霄；飛閣流丹，下臨無地。鶴汀鳧渚，窮島嶼之縈回；桂殿蘭宮，列岡巒之體勢。披繡闥，俯雕甍，山原曠其盈視，川澤紆其駭矚。閭閻撲地，鐘鳴鼎食之家；舸艦迷津，青雀黃龍之舳。云銷雨霽，彩徹區明。落霞與孤鶩齊飛，秋水共長天一色。漁舟唱晚，響窮彭蠡之濱，雁陣驚寒，聲斷衡陽之浦。遙吟俯暢，逸興遄飛。爽籟發而清風生，纖歌凝而白云遏。睢園綠竹，氣凌彭澤之樽；鄴水朱華，光照臨川之筆。四美具，二難并。窮睇眄于中天，極娛游于暇日。天高地迥，覺宇宙之無窮；興盡悲來，識盈虛之有數。望長安于日下，目吳會于云間。地勢極而南溟深，天柱高而北辰遠。關山難越，誰悲失路之人；萍水相逢，盡是他鄉之客。懷帝閽而不見，奉宣室以何年？嗟乎！時運不齊，命途多舛。馮唐易老，李廣難封。屈賈誼于長沙，非無圣主；竄梁鴻于海曲，豈乏明時？所賴君子安貧，達人知命。老當益壯，寧移白首之心？窮且益堅，不墜青云之志。酌貪泉而覺爽，處涸轍以猶歡。北海雖賒，扶搖可接；東隅已逝，桑榆非晚。孟嘗高潔，空余報國之情；阮籍猖狂，豈效窮途之哭！勃，三尺微命，一介書生。無路請纓，等終軍之弱冠；有懷投筆，慕宗愨之長風。舍簪笏于百齡，奉晨昏于萬里。非謝家之寶樹，接孟氏之芳鄰。他日趨庭，叨陪鯉對；今茲捧袂，喜托龍門。楊意不逢，撫凌云而自惜；鐘期既遇，奏流水以何慚？嗚乎！勝地不常，盛筵難再；蘭亭已矣，梓澤丘墟。臨別贈言，幸承恩于偉餞；登高作賦，是所望于群公。敢竭鄙懷，恭疏短引；一言均賦，四韻俱成。請灑潘江，各傾陸海云爾：滕王高閣臨江渚，佩玉鳴鸞罷歌舞。畫棟朝飛南浦云，珠簾暮卷西山雨。閑云潭影日悠悠，物換星移幾度秋。閣中帝子今何在？檻外長江空自流。 </div></div></body> </html>?
倘若我想在div2中加入塊級元素呢？也就是我想讓div1和div2成為兩個互不干擾的模塊，往里面添加內容時，無影響，怎么辦呢？
那么我們可以利用margin或則padding。將div2（自適應寬度）的margin-left或者padding-left設置為div1（固定寬度）的大小就可以了。這里我設置的是margin-left。
<!DOCTYPE html><head><title>width_layout</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"/><style type="text/css">.content {min-width:300px;}.div1 {width:200px;height:300px;background:green;float:left;}.div2 {height:300px;background:pink;margin-left:200px;}.div3 {width:100px;height:100px;background:blue;}</style></head><body><div class="content"><div class="div1"></div><div class="div2"><div class="div3"></div></div></div></body> </html>總結
- 上一篇： 思考：用开发移动app的观念来开发网站
- 下一篇： 高效的沟通方式-会议