CSS中清除浮動的幾種方式
阿新 • • 發佈：2019-02-03
前面我們說了浮動後的元素會影響後面的元素，在進行頁面佈局的時我們使用了浮動後，會給我們帶來很大的困擾，那麼現在來說說清除浮動的幾種的方法
1、使用額外的標籤法，這也是W3C上面使用的方法
在浮動的盒子之下再放一個div標籤，使用clear：both來清除浮動，
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } .father { width: 200px; border: 5px solid blue; } .son { width: 100px; height: 100px; background: red; float: left; } .one { width: 100px; height: 200px; background: green; } </style> </head> <body> <div class="father"> <div class="son"></div> </div> <!--增加額外的一個盒子來清除浮動--> <div style="clear: both"></div> <div class="one"></div> </body> </html>
浮動的影響雖然清除了，但是父盒子的高度沒有辦法撐開，而且還增加了沒有必要的標籤，
2、使用overflow來清除浮動
先找到浮動盒子的父元素，然後在父盒子裡新增overflow：hidden來清除浮動，overflow：hidden原本是隱藏超出部分，但是在這裡可以清除浮動，可以說是瀏覽器的一個bug吧
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } .father { width: 200px; border: 5px solid blue; overflow: hidden; } .son { width: 100px; height: 100px; background: red; float: left; } .one { width: 100px; height: 200px; background: green; } </style> </head> <body> <div class="father"> <div class="son"></div> </div> <div class="one"></div> </body> </html>
使用overflow:hidden就把浮動的影響清除了，同時父元素的高度也撐開了。
3、使用偽元素 :after :before來清除浮動，推薦使用這種方式
效果和第二種方法一樣<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } .father { width: 200px; border: 5px solid blue; } .son { width: 100px; height: 100px; background: red; float: left; } .one { width: 100px; height: 200px; background: green; } .clearfix:after { content: ""; height: 0; line-height: 0; display: block; clear: both; visibility: hidden; /*將元素隱藏起來*/ /*在頁面的clearfix元素後面添加了一個空的塊級元素（這個元素的高為0，行高也為0，並且這個元素清除了浮動）*/ } </style> </head> <body> <div class="father clearfix"> <div class="son"></div> </div> <div class="one"></div> </body> </html>