css 清楚浮動三種方法
阿新 • • 發佈:2018-11-26
hid right pan clas inf hidden 方法 com 使用
我們可以看到這樣一個布局:
<style> .left{ width: 200px; height: 200px; background-color: #00ee00; float: left; } .right{ width: 100px; height: 200px; background-color: #0000FF; float: left; } .footer{ width: 300px; height: 50px; background-color: #0f0f0f; } </style> <div class="content"> <div class="left"></div> <div class="right"></div> </div> <div class="footer"></div>
我們預期效果: 結果:
原因:因為父盒子沒有給高,然後content內的子元素又是左浮動,脫離標準流,然後下面的footer就會跑上去,這是因為浮動問題產生的,如何解決:
方法1:使用clear:both
<style> .left{ width: 200px; height: 200px; background-color: #00ee00; float: left; } .right{ width: 100px; height: 200px; background-color: #0000FF; float: left; } .footer{ width: 300px; height: 50px; background-color: #0f0f0f; } .clearfix{ clear: both; } </style> <div class="content"> <div class="left"></div> <div class="right"></div> <div class="clearfix"></div> </div> <div class="footer"></div>
方法二:使用overflow:hidden;
<style> .content{ overflow: hidden; } .left{ width: 200px; height: 200px; background-color: #00ee00; float: left; } .right{ width: 100px; height: 200px; background-color: #0000FF; float: left; } .footer{ width: 300px; height: 50px; background-color: #0f0f0f; } </style> <div class="content"> <div class="left"></div> <div class="right"></div> </div> <div class="footer"></div>
第三種(推薦):clearfix偽類
<style> .left{ width: 200px; height: 200px; background-color: #00ee00; float: left; } .right{ width: 100px; height: 200px; background-color: #0000FF; float: left; } .footer{ width: 300px; height: 50px; background-color: #0f0f0f; } .clearfix:after{ content: ""; display: block; clear: both; height: 0; line-height: 0; visibility: hidden; } .clearfix{ zoom: 1;//兼容ie瀏覽器 } </style> <div class="content clearfix"> <div class="left"></div> <div class="right"></div> </div> <div class="footer"></div>
css 清楚浮動三種方法