CSS響應式佈局之清除浮動
阿新 • • 發佈:2018-12-13
在很多前端工程師日常工作中,在使用到float佈局時,總會有一點需要去考慮的,那就是清除浮動問題。
那這個問題怎麼會發生的呢?
當float子元素高度超出父級元素高度時,父級元素高度塌縮,因為float元素脫離文件流,其佈局不受父元素控制
這個情況如下圖所示
程式碼如下:
<style> .wrap { padding: 30px; background: #CECECE; color: #FFFFFF; text-align: center; line-height: 100px; } .left { float: left; background: #00A8FE; width: 300px; height: 200px; padding: 10px; text-align: center; line-height: 200px; color: #FFFFFF; opacity: 0.3; } .right { float: right; background: #9ACD32; width: 300px; height: 200px; padding: 10px; text-align: center; line-height: 200px; color: #FFFFFF; opacity: 0.3; } </style> <article class="wrap"> wrap <div class="left">left</div> <div class="right">right</div> </article>
那這個問題怎麼解決呢?
1. clear:both
在父級元素內部加個div,設定clear: both即可,清除兩邊的浮動。
<style> ... .clear { clear: both; } </style> <article class="wrap"> wrap <div class="left">left</div> <div class="right">right</div> <div class="clear"></div> </article>
2. overflow:hidden
<style>
...
.wrap {
overflow: hidden; // auto也可以,但是切記visible不行
}
...
</style>
<article class="wrap">
wrap
<div class="left">left</div>
<div class="right">right</div>
</article>
3. :after偽元素
<style> ... .wrap:after { clear: both; // auto也可以,但是切記visible不行 } ... </style> <article class="wrap"> wrap <div class="left">left</div> <div class="right">right</div> </article>
這裡有個偽元素的知識點:
:before和:after是分別在當前元素內部的前後插入兩個元素塊。
這裡再wrap類後價格:after偽元素,其實和解決方案一一樣,在內部的最後加一個元素,裡面使用clear:both從而達到清除浮動的效果。
清除浮動後效果: