12.利用3種方式來解決浮動脫標的問題
阿新 • • 發佈：2019-01-26
問題：
當父盒子沒有定義高度，巢狀的盒子浮動之後，下邊的元素髮生位置錯誤。
父盒子有定義高度：
父盒子沒定義高度：
※父盒子沒有了高度以後，子盒子看似還有高度形狀（實質上已經脫標，浮動起來了，所以下面黑色的那個div塊就佔據了它們的位置）
◆清除浮動不是不用浮動，清除浮動產生的不利影響。（比如讓網頁佈局不會變亂）
◆清除浮動的應用背景：
比如開啟瀏覽一個新聞（每條新聞的字數都不一樣，所以佔的篇幅都不一樣，大小不好確定），所以就需要清除浮動，否則會亂。
◆清除浮動的方法
clear: left | right | both
工作裡用的最多的是clear:both;
★額外標籤法
優點：通俗好理解。
缺點：浮動太多會造成增加太多標籤
在最後一個浮動元素後新增標籤,。
★給父集元素使用overflow:hidden; bfc
如果有內容出了盒子，不能使用這個方法。（因為overflow:hidden會把超出父盒子的那部分捨棄掉）
★偽元素清除浮動 推薦使用
注：clearfix是可以改名的（不過不推薦）
程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .header,.main,.footer{ width:500px; } .header,.footer{ height: 100px; background: #000; } .content{ width: 300px; height: 300px; background: orange; float: left; /*margin-top:-100px;*/ } .sidebar{ width: 190px; height: 300px; background: green; float: right; } .main{ background: #eee; margin: 10px 0; /*第二種方法：給父集元素使用overflow:hidden;*/ /*overflow: hidden;*/ } /*第三種方法：偽元素清除浮動*/ .clearfix:after{ content: "."; display: block; height: 0; line-height: 0; visibility: hidden; clear:both; } /*相容ie瀏覽器*/ .clearfix{ zoom:1; } </style> </head> <body> <div class="header"></div> <div class="main clearfix"> <div class="content"></div> <div class="sidebar"></div> <!-- 額外標籤法 --> <!--<div style="clear:both;"></div>--> </div> <div class="footer"></div> </body> </html>