使用display:inline-block會出現的情況:
1.讓區塊元素在一行中顯示
2.讓內嵌支援寬高
3.換行被解析了
4.不設定的時候寬度由內容撐開
5.在IE6,7下步支援區塊標籤
由於inline-block屬性換行的時候被解析(有間隙)故解決方法使用浮動float:left/right
使用浮動時出現的情況:
1.使區塊元素在一行中顯示
2.使內嵌元素支援寬高
3.不設定不寬高的時候寬度由內容撐開
4.換行不被解析(故使用行內元素的時候清除間隙的方法可以使用浮動)
5.元素添加浮動,會脫離文檔流,按照指定的一個方向移動,直到碰到父級的邊界或另一個浮動元素停止(文檔流是文檔中可顯示物件在排列時所佔用的位置)
清除浮動的方法:
1.給父級也加浮動(這種情況當父級margin:0 auto;時不居中)
<!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;} .p{ width:200px;height:200px;background:red;float:left;} /* 清浮动 1.给父级也加浮动(不居中了) */ </style> </head> <body> <p class="box"> <p class="p"></p> </p> </body> </html>
2.給父級加display:inline-block; (同方法1,不居中。只有IE6,7居中)
<!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; display:inline-block;} .p{ width:200px;height:200px;background:red;float:left;} /* 清浮动 1.给父级也加浮动 2.给父级加display:inline-block */ </style> </head> <body> <p class="box"> <p class="p"></p> </p> </body> </html>
3.在浮動元素下加5394d62b37c0d1016baca90bf99fbfbf0cba36f12cf561cef14ffa62bcdafa2c
.clear{ height:0px;font-size:0;clear:both;}但是在ie6下,塊元素有最小高度,即當height32e32d5e266f9c78227a8a1495be3575
<!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;} .p{ width:200px;height:200px;background:red;float:left;} /* 清浮动 1.给父级也加浮动 2.给父级加display:inline-block 3.在浮动元素下加<p class="clear"></p> .clear{ height:0px;font-size:0;clear:both;} 4.在浮动元素下加<br clear="all"/> */ </style> </head> <body> <p class="box"> <p class="p"></p> <br clear="all"/> </p> </body> </html>
5.為浮動元素父級加上{zoom:1;}
:after{content:""; display:block;clear:both;}
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> .box{margin:0 auto;border:10px solid #000;} .p{ width:200px;height:200px;background:red;float:left;} .clear{zoom:1;} .clear:after{content:""; display:block;clear:both;} /* 清浮动 1.给父级也加浮动 2.给父级加display:inline-block 3.在浮动元素下加<p class="clear"></p> .clear{ height:0px;font-size:0;clear:both;} 4.在浮动元素下加<br clear="all"/> 5. 给浮动元素的父级加{zoom:1;} :after{content:""; display:block;clear:both;} **在IE6,7下浮动元素的父级有宽度就不用清浮动 haslayout 根据元素内容的大小 或者父级的父级的大小来重新的计算元素的宽高 display: inline-block height: (任何值除了auto) float: (left 或 right) width: (任何值除了auto) zoom: (除 normal 外任意值) */ </style> </head> <body> <p class="box clear"> <p class="p"></p> </p> </body> </html>
6.給浮動元素父級加overflow:auto;
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> .box{ width:300px;border:1px solid #000;overflow:auto;} .p1{ width:260px;height:400px;background:Red;float:left;} </style> </head> <body> <p class="box"> <p class="p1"></p> </p> </body> </html>
以上是實例介紹六種html清除浮動的方式,以供參考的詳細內容。更多資訊請關注PHP中文網其他相關文章!