CSS清除浮動

時間 2019-11-24

標籤 css 清除浮動欄目 CSS 简体版

原文原文鏈接

　　今天看到一篇文章關於清除浮動的，忽然間腦殼短路了，咦？爲何要清除浮動？原諒個人無知，搜了下原來是這樣，又倒騰出原來的筆記，唉，原本就有記錄啊，並且也會常常用到，用的久了連原理都忘了。恩，防止本身再犯一樣的錯誤，我仍是本身總結整理出來吧！話很少說，代碼爲證！html

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>爲何要清除浮動</title>
 6         <style>
 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     <body>
14         <div class="wrapper">
15             <div class="box1"></div>
16             <div class="box2"></div>
17             <div class="box3"></div>
18         </div>
19     </body>
20 </html>

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

其中A-B-C分別是I元素裏的子元素，若是沒有浮動的狀況它們是按照標準文檔流佈局（塊級元素從上至下，行內元素從左至右），一個網頁須要合理的佈局纔可以吸引住用戶，咱們須要在有限的空間內展現更多的信息，有時候須要a,b,c,排在一行，咱不用高大上的Flexbox（彈性盒佈局）由於IE8及如下都不支持，你要問我怎麼知道的，給大夥兒甩個網址http://caniuse.com/#home，自行搜索哦！另外IE不支持VW和VH單位，用的小朋友謹慎！ 一般狀況app

咱們是不須要給父元素定寬高的，並且想讓它寬高自適應，可是若是咱們給子元素添加了float：left;以後會是什麼狀況呢？我們用圖說話：佈局

父元素哪裏去了？！恩，這裏咱要說明下浮動是什麼原理了，打個比方吧，原諒個人想象力不豐富，咱們把父元素想象爲一個能夠自動收縮的盒子，當咱們不停地往裏面放子盒子的時候，它就會自動被撐開，給子元素加float（英文原義指飄動浮動的意思）的時候，就至關於子元素飄在了父盒子之上，那麼顯然父盒子空了就自動收縮回去了，如今咱們要作的是如何不讓它收縮回去：spa

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

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

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

1 <body>
2         <div class="wrapper">
3             <div class="box1"></div>
4             <div class="box2"></div>
5             <div class="box3"></div>
6             <div class="box4"></div>
7         </div>
8     </body>

box4就是咱們添加的空元素，這個空元素的具體寫法以下：（有兼容~有兼容~有兼容~萬惡的IE6不支持，由於人家有默認的最小高度）htm

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

3.採用僞類選擇器的方式來達到清除浮動的目的，我工做中採用的就是這種方式，屢試不爽哦！（很差意思，剛纔本身給本身挖了一個坑，目前還在坑裏，我再試試...）blog

.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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。