標籤：nbsp 方法 相容 head oct png 清除 lock back
1. 使用額外標籤法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .outer{ border: 1px solid black; width: 210px; } .inner{ width: 50px; height: 50px; background-color: #005FC3; margin:0 10px; float: left; } .footer{ background-color: #ff4400; width: 212px; height: 100px; } .clearfix{ clear: both; } </style></head><body> <div class="outer"> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> <div class="clearfix"></div> </div> <div class="footer"></div></body></html>
這是早期普遍使用的方法，但是對於有代碼潔癖的人來說，解決的不夠完美
2. 使用 :after 為元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .outer{ border: 1px solid black; width: 210px; } .inner{ width: 50px; height: 50px; background-color: #005FC3; margin:0 10px; float: left; } .footer{ background-color: #ff4400; width: 212px; height: 100px; } .clearfix:after{ /*最簡方式*/ content: ‘‘; display: block; clear: both; } /* 新浪使用方式 .clearfix:after{ content: ‘‘; display: block; clear: both; height: 0; visibility: hidden; } */ .clearfix{ /*相容 IE*/ zoom: 1; } </style></head><body> <div class="outer clearfix"> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> </div> <div class="footer"></div></body></html>
3. 給父元素定高
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .outer { border: 1px solid black; width: 210px; height: 50px; } .inner { width: 50px; height: 50px; background-color: #ff4400; margin: 0 10px; float: left; } .footer { background-color: #005FC3; width: 212px; height: 100px; } </style> </head> <body> <div class="outer"> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> </div> <div class="footer"></div> </body></html>
4. 利用 overflow:hidden 屬性
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .outer{ border: 1px solid black; width: 210px; overflow: hidden; zoom: 1;/*相容 IE*/ } .inner{ width: 50px; height: 50px; background-color: #005FC3; margin:0 10px; float: left; } .footer{ background-color: #ff4400; width: 212px; height: 100px; } </style></head><body> <div class="outer"> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> </div> <div class="footer"></div></body></html>
CSS 清除浮動的方法
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
