1.采用:after的方法清除浮動

優點：避免在html里插入多余的標簽

詳情：http://www.positioniseverything.net/easyclearing.html

整理成一個通用的.clearfix

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

content:'.'的作用是在清除元素的內容后邊添加一個“點”，當然添加其他也可以，只是"點"簡單。

display:block之所以設成block，是為了后面clear:both的操作，只有塊級元素對clear:both;有效。

height:0;visibility:hidden;把:after插入的內容高度設成0,可見度設成隱藏。

再修復瀏覽器兼容的bug

.clearfix{display:inline-block;}
/* Hides from IE-mac \*/
.clearfix { display: block; }
/* End hide from IE-mac */

參考：http://www.cssforest.org/blog/index.php?id=77

轉載于:https://www.cnblogs.com/guopei/archive/2011/04/20/2022603.html

總結

以上是生活随笔為你收集整理的CSS中关于清除浮动的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。