今天看到一篇文章關于清除浮動的，突然間腦袋短路了，咦？為什么要清除浮動？原諒我的無知，搜了下原來是這樣，又倒騰出原來的筆記，唉，本來就有記錄啊，而且也會經常用到，用的久了連原理都忘了。恩，防止自己再犯同樣的錯誤，我還是自己總結整理出來吧！話不多說，代碼為證！

1 DOCTYPE html>

2

3

4

5

為什么要清除浮動title>

6

7 .wrapper{width:50%;background:cornflowerblue;border:2px solid black;}

8 .box1{width:30%;height:100px;background:red;}

9 .box2{width:30%;height:100px;background:black;}

10 .box3{width:30%;height:100px;background:chocolate;}

11 style>

12 head>

13

14

15 div>

16 div>

17 div>

18 div>

19 body>

20 html>

恩，各個瀏覽器運行的效果圖如下：

其中A-B-C分別是I元素里的子元素，如果沒有浮動的情況它們是按照標準文檔流布局(塊級元素從上至下，行內元素從左至右)，一個網頁需要合理的布局才能夠吸引住用戶，我們需要在有限的空間內展示更多的信息，有時候需要a,b,c,排在一行，咱不用高大上的Flexbox(彈性盒布局)因為IE8及以下都不支持，你要問我怎么知道的，給大伙兒甩個網址http://caniuse.com/#home，自行搜索哦！另外IE不支持VW和VH單位，用的小朋友謹慎！通常情況

我們是不需要給父元素定寬高的，而且想讓它寬高自適應，但是如果我們給子元素添加了float：left;之后會是什么情況呢？咱們用圖說話：

父元素哪里去了？！恩，這里咱要說明下浮動是什么原理了，打個比方吧，原諒我的想象力不豐富，我們把父元素想象為一個可以自動收縮的盒子，當我們不停地往里面放子盒子的時候，它就會自動被撐開，給子元素加float(英文原義指飄動浮動的意思)的時候，就相當于子元素飄在了父盒子之上，那么顯然父盒子空了就自動收縮回去了，現在我們要做的是如何不讓它收縮回去：

1.給父元素加overflow：hidden；恩，要說這個方法的優劣，我剛才查了下，可能會對SEO不友好，但具體有多大的嚴重影響我還沒有這方面的經驗，姑且就這樣解釋吧，待我遇到了再回過來修改。

.wrapper{width:50%;background: cornflowerblue;border:2px solid black;overflow:hidden;}

2.給子元素的下方添加空的div

1

2

3 div>

4 div>

5 div>

6 div>

7 div>

8 body>

box4就是我們添加的空元素，這個空元素的具體寫法如下：(有兼容~有兼容~有兼容~萬惡的IE6不支持，因為人家有默認的最小高度)

1 .box4{clear:both;height: 0;overflow: hidden;}

3.采用偽類選擇器的方式來達到清除浮動的目的，我工作中采用的就是這種方式，屢試不爽哦！(不好意思，剛才自己給自己挖了一個坑，目前還在坑里，我再試試...)

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

恩，好了，就是上面的那樣，content: '.'; display:block;對于五大瀏覽器來說不可缺少，visibility:hidden;的作用是允許瀏覽器解析它，但是用戶看不到哦。

原創文章，轉載請注明出處 蝸蝸牛在路上[http://www.cnblogs.com/wowoniuzailushang]

同步發表于: http://blog.csdn.net/wowoniuzailushang CSDN

總結

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

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