清除浮动的7种方法
使用display：inline-block會出現的情況：
1.使塊元素在一行顯示
2.使內嵌支持寬高
3.換行被解析了
4.不設置的時候寬度由內容撐開
5.在IE6,7下步支持塊標簽
由于inline-block屬性換行的時候被解析（有間隙）故解決方法使用浮動float:left/right
使用浮動時出現的情況：
1.使塊元素在一行顯示
2.使內嵌元素支持寬高
3.不設置不寬高的時候寬度由內容撐開
4.換行不被解析（故使用行內元素的時候清除間隙的方法可以使用浮動）
5.元素添加浮動，會脫離文檔流，按照指定的一個方向移動，直到碰到父級的邊界或者另一個浮動元素停止（文檔流是文檔中可顯示對象在排列時所占用的位置）
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>無標題文檔</title> 6 <style> 7 div,span{height:100px;background:red;border:1px solid #000; float:left;} 8 /* 9 inline-block 10 11 1.使塊元素在一行顯示 12 13 2.使內嵌支持寬高 14 15 3.換行被解析了 16 17 4.不設置寬度的時候寬度由內容撐開 18 19 5.在IE6,7下不支持塊標簽 20 21 浮動: 22 1.使塊元素在一行顯示 23 24 2.使內嵌支持寬高 25 26 3.不設置寬度的時候寬度由內容撐開 27 28 */ 29 </style> 30 </head> 31 <body> 32 <div class="div1">div1</div> 33 <div class="div2">div2</div> 34 <span class="span1">span1</span> 35 <span class="span2">span2</span> 36 </body> 37 </html>下面的代碼只有box1浮動，則box1，box2重疊一起。兩者都浮動就不會重疊
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>無標題文檔</title> <style> .box1{ width:100px;height:100px;background:red; float:left;} .box2{ width:200px;height:200px;background:blue; /* float:left;*/} </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>清浮動的方法：
1.給父級也加浮動（這種情況當父級margin:0 auto;時不居中）
eg：
使用display：inline-block會出現的情況：1.使塊元素在一行顯示2.使內嵌支持寬高3.換行被解析了4.不設置的時候寬度由內容撐開5.在IE6,7下步支持塊標簽由于inline-block屬性換行的時候被解析（有間隙）故解決方法使用浮動float:left/right使用浮動時出現的情況：1.使塊元素在一行顯示2.使內嵌元素支持寬高3.不設置不寬高的時候寬度由內容撐開4.換行不被解析（故使用行內元素的時候清除間隙的方法可以使用浮動）5.元素添加浮動，會脫離文檔流，按照指定的一個方向移動，直到碰到父級的邊界或者另一個浮動元素停止（文檔流是文檔中可顯示對象在排列時所占用的位置）1 <!DOCTYPE HTML>2 <html>3 <head>4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">5 <title>無標題文檔</title>6 <style>7 div,span{height:100px;background:red;border:1px solid #000; float:left;}8 /*9 inline-block 10 11 1.使塊元素在一行顯示 12 13 2.使內嵌支持寬高 14 15 3.換行被解析了 16 17 4.不設置寬度的時候寬度由內容撐開 18 19 5.在IE6,7下不支持塊標簽 20 21 浮動: 22 1.使塊元素在一行顯示 23 24 2.使內嵌支持寬高 25 26 3.不設置寬度的時候寬度由內容撐開 27 28 */ 29 </style> 30 </head> 31 <body> 32 <div class="div1">div1</div> 33 <div class="div2">div2</div> 34 <span class="span1">span1</span> 35 <span class="span2">span2</span> 36 </body> 37 </html>下面的代碼只有box1浮動，則box1，box2重疊一起。兩者都浮動就不會重疊<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>無標題文檔</title> <style> .box1{ width:100px;height:100px;background:red; float:left;} .box2{ width:200px;height:200px;background:blue; /* float:left;*/} </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>清浮動的方法：1.給父級也加浮動（這種情況當父級margin:0 auto;時不居中）eg:<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>無標題文檔</title> <style> .box{ width:300px;margin:0 auto;border:10px solid #000; float:left;} .div{ width:200px;height:200px;background:red;float:left;} /*清浮動1.給父級也加浮動(不居中了) */ </style> </head> <body> <div class="box"><div class="div"></div> </div> </body> </html> View Code2.給父級加display:inline-block;(同方法1，不居中。只有IE6,7居中)
eg：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>無標題文檔</title> 6 <style> 7 .box{ width:300px;margin:0 auto;border:10px solid #000; display:inline-block;} 8 .div{ width:200px;height:200px;background:red;float:left;} 9 /* 10 清浮動 11 1.給父級也加浮動 12 2.給父級加display:inline-block 13 */ 14 </style> 15 </head> 16 <body> 17 <div class="box"> 18 <div class="div"></div> 19 </div> 20 </body> 21 </html> View Code3.在浮動元素下加<div class="clear"></div>
?? ?.clear{ height:0px;font-size:0;clear:both;}但是在ie6下，塊元素有最小高度，即當height<19px時，默認為19px，解決方法：font-size:0;或overflow:hidden;
eg：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>無標題文檔</title> 6 <style> 7 .box{ width:300px;margin:0 auto;border:10px solid #000;} 8 .div{ width:200px;height:200px;background:red;float:left;} 9 .clear{ height:0px;font-size:0;clear:both;} 10 /* 11 清浮動 12 1.給父級也加浮動 13 2.給父級加display:inline-block 14 3.在浮動元素下加<div class="clear"></div> 15 .clear{ height:0px;font-size:0;clear:both;} 16 */ 17 </style> 18 </head> 19 <body> 20 <div class="box"> 21 <div class="div"></div> 22 <div class="clear"></div> 23 </div> 24 </body> 25 </html> View Code4.在浮動元素下加<br clear="all">
eg:
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>無標題文檔</title> 6 <style> 7 .box{ width:300px;margin:0 auto;border:10px solid #000;} 8 .div{ width:200px;height:200px;background:red;float:left;} 9 /* 10 清浮動 11 1.給父級也加浮動 12 2.給父級加display:inline-block 13 3.在浮動元素下加<div class="clear"></div> 14 .clear{ height:0px;font-size:0;clear:both;} 15 4.在浮動元素下加<br clear="all"/> 16 */ 17 </style> 18 </head> 19 <body> 20 <div class="box"> 21 <div class="div"></div> 22 <br clear="all"/> 23 </div> 24 </body> 25 </html> View Code5.給浮動元素父級加{zoom:1;}
?? ?:after{content:""; display:block;clear:both;}
eg：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>無標題文檔</title> 6 <style> 7 .box{margin:0 auto;border:10px solid #000;} 8 .div{ width:200px;height:200px;background:red;float:left;} 9 .clear{zoom:1;} 10 .clear:after{content:""; display:block;clear:both;} 11 /* 12 清浮動 13 1.給父級也加浮動 14 2.給父級加display:inline-block 15 3.在浮動元素下加<div class="clear"></div> 16 .clear{ height:0px;font-size:0;clear:both;} 17 4.在浮動元素下加<br clear="all"/> 18 19 5. 給浮動元素的父級加{zoom:1;} 20 :after{content:""; display:block;clear:both;} 21 22 **在IE6，7下浮動元素的父級有寬度就不用清浮動 23 24 haslayout 根據元素內容的大小 或者父級的父級的大小來重新的計算元素的寬高 25 26 display: inline-block 27 height: (任何值除了auto) 28 float: (left 或 right) 29 width: (任何值除了auto) 30 zoom: (除 normal 外任意值) 31 */ 32 </style> 33 </head> 34 <body> 35 <div class="box clear"> 36 <div class="div"></div> 37 </div> 38 </body> 39 </html> View Code6.給浮動元素父級加overflow:auto;
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>無標題文檔</title> 6 <style> 7 .box{ width:300px;border:1px solid #000;overflow:auto;} 8 .div1{ width:260px;height:400px;background:Red;float:left;} 9 </style> 10 </head> 11 <body> 12 <div class="box"> 13 <div class="div1"></div> 14 </div> 15 </body> 16 </html> View Code?7.給浮動父級加position:absolute;或者position:fixed;
eg:
1 <style> 2 #box1{border:30px solid red; position:absolute;/*position:fixed;*/} 3 #box2{width:300px; height:300px; background:blue; float:left;} 4 5 </style> 6 </head> 7 8 <body> 9 10 <div id="box1"> 11 <div id="box2"></div> 12 </div> 13 14 </body>
轉載于:https://www.cnblogs.com/wxydigua/p/3424882.html
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
- 上一篇： 工控: 西门子STEP 7安装和连接S7
- 下一篇： 粒子群优化算法的实现