2015第10週五CSS—2

時間 2019-11-30

標籤 10周 css 欄目 CSS 简体版

原文原文鏈接

常常遇到的瀏覽器兼容性有哪些？如何解決？

　　一、瀏覽器默認的margin和padding不一樣。解決方案是加一個全局的*{margin:0;padding:0;}來統一。javascript

　　二、IE6雙邊距bug:塊屬性標籤float後，又有橫行的margin狀況下，在ie6顯示margin比設置的大。解決方案是在float的標籤樣式控制中加入 display:inline;將其轉化爲行內屬性。測試代碼以下：css

<html>
<head>
    <title>Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style type="text/css">
        .one{
            float: left;
            width: 150px;
            height:150px;
            background:#EEE;
            margin: 5px 0 5px 150px;
        }
    </style>
</head>
<body>
    <div class="one">Double Margin Bug(150*150)</div>
</body>
</html>

　　三、在ie6，ie7中元素高度超出本身設置高度。緣由是IE8之前的瀏覽器中會給元素設置默認的行高的高度致使的。解決方案是加上overflow:hidden或設置line-height爲更小的高度。測試代碼：html

.one{
    height:5px;
    width:100px;
    background:#F60;
}

　　四、min-height在IE6下不起做用。解決方案是添加 height:auto !important;height:xxpx;其中xx就是min-height設置的值。java

　　五、透明性IE用filter:Alpha(Opacity=60)，而其餘主流瀏覽器用 opacity:0.6;git

　　六、a(有href屬性)標籤嵌套下的img標籤，在IE下會帶有邊框。解決辦法是加上a img{border:none;}樣式。github

　　七、input邊框問題。去掉input邊框通常用border:none;就能夠，但因爲IE6在解析input樣式時的BUG(優先級問題)，在IE6下無效。web

　　ie6的默認CSS樣式，涉及到border的有border-style:inset;border-width:2px;瀏覽器根據本身的內核解析規則，先解析自身的默認CSS，再解析開發者書寫的CSS，達到渲染標籤的目的。IE6對INPUT的渲染存在bug，border:none;不被解析，當有border-width或border-color設置的時候纔會令IE6去解析border-style:none;。面試

　　解決方案是用:border:0或border:0 none;或border:none:border-color:transparent;，推薦用第三種方案。瀏覽器

　　八、父子標籤間用margin的問題，表如今有時除IE(6/7)外的瀏覽器子標籤margin轉移到了父標籤上，IE6&7下沒有轉移。測試代碼：緩存

<body>
    <style type="text/css">
        .box1{
            height:150px;
            background:#CCC;
        }
        .box1_1{
            height:50px;
            margin-top:50px;
            background:#AAA;
        }
    </style>
    <div class="box1">
        <div class="box1_1">box1_1</div>
    </div>
</body>

　　解決辦法就是父子標籤間的間隔建議用padding，兄弟標籤間用margin。

　　九、假設兩塊div，第一塊浮動而第二塊沒有浮動，IE6下第二塊就會跑到第一塊邊上，而且兩者之間還留有間距，但標準瀏覽器中是第二塊重合於第一塊。測試代碼：

<body>
    <style type="text/css">
        div{
            width:100px;
            height:100px;
            border:1px solid #CCC;
        }
        .one{
            float:left;
            height:50px;
        }
    </style>
    <div class="one">One</div>
    <div class="two">Two</div>
</body>

　　解決辦法是改變設計思路，若是真有兩個div重合的需求，能夠用下面的代碼實現：

<body>
    <style type="text/css">
        div{
            width:100px;
            height:100px;
            border:1px solid #CCC;
        }
        .parent{
            position:relative;
        }
        .one{
            position:absolute;
            left:0;
            top:0;
        }
    </style>
    <div class="parent">
        <div class="one">One</div>
        <div class="one">Two</div>
    </div>
</body>

　　十、父子關係的標籤，子標籤浮動致使父標籤再也不包裹子標籤。測試代碼：

<body>
    <style type="text/css">
        .parent{
            background:#888;
            border:5px solid #888;
        }
        .one{
            float:left;
            width:100px;
            height:100px;
            background:#F60;
        }
    </style>
    <div class="parent">
        <div class="one">One</div>
    </div>
</body>

　　在IE、Chrome、Firefox下都是下面的效果：

　　能夠看到父元素並無包裹子元素，這是由於float形成的，解決方案是清除浮動就好了，用下面的代碼能夠解決：

<body>
    <style type="text/css">
        .parent{
            background:#888;
            border:5px solid #888;
            zoom:1;/*--for IE--*/
        }
        .parent:after{ /*--for other broswer--*/
            content:".";
            display:block;
            line-height:0;
            clear:both;
            visibility:hidden;
        }
        .one{
            float:left;
            width:100px;
            height:100px;
            background:#F60;
        }
    </style>
    <div class="parent">
        <div class="one">One</div>
    </div>
</body>

　　如今效果是：

如何居中一個浮動元素?

　　父元素和子元素同時左浮動，而後父元素相對左移動50%，再而後子元素相對右移動50%，或者子元素相對左移動-50%也就能夠了。

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <meta charset="utf-8"/>
    <style type="text/css">
        .p{
            position:relative;
            left:50%;
            float:left;
        }
        .c{
            position:relative;
            float:left;
            right:50%;
        }
    </style>
</head>
<body>
    <div class="p">
        <h1 class="c">Test Float Element Center</h1>
    </div>
</body>
</html>

你如何管理CSS文件、JS與圖片？

　　一、對各個項目中CSS，JS裏的穩定的通用代碼進行提取，造成公共文件，而後利用CDN等資源進行緩存，減輕服務器壓力。

　　二、去掉JS、CSS裏的冗餘代碼，對代碼進行精減。

　　三、對JS、CSS進行壓縮合並，減小請求次數。

　　四、對頁面上的小圖標，背景等圖片進行合併，減小請求次數。

　　五、JS、CSS、圖片均用版本控制工具進行管理，方便修改與恢復。

行內元素和塊級元素各有哪些？

　　行內元素會再一條直線上，是在同一行的。如我是行內元素span 我是行內元素a

　　塊級元素會各佔一行。如

我是塊級元素div

我是塊級元素p

　　行內元素主要有：<span>、<a>、<b>、<img>、<br>、<button>、<strong>、<textarea>、<select>

　　塊級元素主要有：<div>、<ul>、<li>、<p>、<fieldset>、<form>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<hr>、<iframe>、<ol>、<pre>、<table>、<tr>、<td>

　　行內元素能夠經過display:block轉爲塊級元素。另外塊級元素的margin和padding都正常，行內元素左右maring和左右padding正常，上下不識別，也就是說不能經過margin-top和padding-top來改變行高。

CSS引入的方式有哪些?

　　CSS與HTML文檔結合的4中方法：
　　一、使用<link>元素連接到外部的樣式文件
　　二、在<head>元素中使用"style"元素來指定
　　三、使用CSS "@import"標記來導入樣式表單
　　四、在<body>內部的元素中使用"style"屬性來定義樣式

　　Demo:

<html>
<head>
      <title>css demo</title>
      <link rel=stylesheet type="text/css" href="css/name.css" title="cool">
      <style type="text/css">
            @import url(css/name2.css);
            h1 {color:red}
      </style>
</head>
<body>
      <h1>CSS demo</h1>
      <p style="color:blue">Test</p>
</body>
</html>

link和@import的區別是?

　　本質上，這兩種方式都是爲了加載CSS文件，但仍是存在着細微的差異。

　　一、老祖宗的差異。link屬於XHTML標籤，而@import徹底是CSS提供的一種方式。link標籤除了能夠加載CSS外，還能夠作不少其它的事情，好比定義RSS，定義rel鏈接屬性等，@import就只能加載CSS了。

　　二、加載順序的差異。當一個頁面被加載的時候（就是被瀏覽者瀏覽的時候），link引用的CSS會同時被加載，而@import引用的CSS會等到頁面所有被下載完再被加載。

　　三、兼容性的差異。因爲@import是CSS2.1提出的因此老的瀏覽器不支持，@import只有在IE5以上的才能識別，而link標籤無此問題。

　　四、使用dom控制樣式時的差異。當使用javascript控制dom去改變樣式的時候，只能使用link標籤，由於@import不是dom能夠控制的。

浮動真正的意義在哪裏呢？要知道這個問題的答案很簡單，假設如今CSS中沒有浮動(float)屬性，那麼會變成一個什麼樣子。咱們會發現，目前流行採用浮動方法實現的不管是分欄佈局，仍是列表排列咱們均可以用其餘一些CSS屬性（不考慮table）代替實現，惟一一個實現不了的就是「文字環繞圖片」，我是想不出來能有什麼方法可讓文字環繞圖片顯示。好，這個替代不了的做用纔是float真正的意義所在。此做用相似於word中的版式，很基礎的原始的做用：

例如左邊這張word截圖就含有左浮動屬性(float:left)，這纔是浮動應該作的事情。這是很是重要的結論，這是深刻理解浮動屬性的基礎，咱們後面探討的一些浮動相關的問題均可以由這裏引伸出來，因此，請記住，浮動出現的意義其實只是用來讓文字環繞圖片而已，僅此而已。而咱們目前用浮動實現頁面佈局本不是浮動該乾的事情。

4、浮動的本質是什麼？

我將浮動的本質定義爲「包裹與破壞」！

1. 浮動的「包裹性」
先說句您應該沒有見過的結論：撇開浮動的「破壞性」，浮動就是個帶有方位的display:inline-block屬性。

display:inline-block某種意義上的做用就是包裹(wrap)，而浮動也有相似的效果。舉個常見例子，或許您有實現寬度自適應按鈕的經驗，實現寬度自適應的關鍵就是要讓按鈕的大小自適應於文字的個數，這就須要按鈕要自動包裹在文字的外面。咱們用什麼方法實現呢？一就是display:inline-block；二就是float。例如咱們要實現新浪博客中的「發表文章」之類的寬度自適應按鈕（以下圖）:

背景圖片爲：

display:inline-block方法

CSS代碼以下：

.btn1{display:inline-block; background:url(http://www.zhangxinxu.com/study/image/sina_gray_btn.png) no-repeat left top; padding-left:3px; color:#000000; font-size:12px; text-decoration:none;}
.btn1 cite{display:block; line-height:26px; padding:0 13px 0 10px; background:url(http://www.zhangxinxu.com/study/image/sina_gray_btn.png) no-repeat right top;}

HTML代碼以下：

<a href="javascript:void(0);" class="btn1"><cite>inline-block方法</cite></a>

結果以下圖：

float:left方法
此方法的CSS代碼與上面的inline-block方法惟一不一樣之處就在於這裏是float:left;

CSS代碼以下：

.btn1{float:left; background:url(http://www.zhangxinxu.com/study/image/sina_gray_btn.png) no-repeat left top; padding-left:3px; color:#000000; font-size:12px; text-decoration:none;}
.btn1 cite{display:block; line-height:26px; padding:0 13px 0 10px; background:url(http://www.zhangxinxu.com/study/image/sina_gray_btn.png) no-repeat right top;}

HTML代碼以下：

<a href="javascript:void(0);" class="btn1"><cite>float方法</cite></a>

結果以下圖：

您能夠狠狠地點擊這裏：按鈕寬度自適應demo

上面這個例子旨在說明浮動屬性（不管是左浮動仍是右浮動）某種意義上而言與display:inline-block屬性的做用是如出一轍的，因此相似於display:block; float:left;的CSS代碼超過95%的狀況是沒有道理的(display:block是多餘的)。然而，float沒法等同於display:inline-block，其中緣由之一就是浮動的方向性，display:inline-block僅僅一個水平排列方向，就是從左往右，而float能夠從右往左排列，這就是二者的差別。然而，咱們又有多少狀況須要元素從右往左排列呢？不多，因此，CSS中，沒有浮動這一屬性不是什麼大不了的事情，它其實就那麼回事。

2. 浮動的「破壞性」
浮動能夠說是全部CSS屬性中的「破壞之王」。要理解浮動的破壞性，咱們要從浮動最原始的意義入手。我在上面把浮動的原始意義用粗斜體表示出來了，就是「只是用來讓文字環繞圖片而已，僅此而已。」

因此，只要您弄明白了爲何文字會環繞含浮動屬性的圖片，您就會知道我所說的浮動的「破壞性」是什麼意思了。//下面這部份內容是本文核心，多我的觀點，我儘可能表述清楚。您如有興趣，能夠放慢在這裏的閱讀速度。

先說結論：文字之因此會環繞含有float屬性的圖片時由於浮動破壞了正常的line boxes。

這裏有必要先講講line boxes模型。先看下面一段普通的HTML代碼：

<p>這是一行普通的文字，這裏有個 <em>em</em> 標籤。</p>

這段HTML代碼涉及到4種boxes：
一、首先是p標籤所在的containing box，此box包含了其餘的boxes；

二、而後就是inline boxes，以下圖標註，

inline boxes不會讓內容成塊顯示，而是排成一行，若是外部含inline屬性的標籤(span,a,cite等)，則屬於inline boxes，若是是個光禿禿的文字，則屬於匿名inline boxes。

三、line boxes，見下圖的標註：

在containing boxes裏，一個一個的inline boxes組成了line boxes。這是浮動影響佈局的關鍵box類型，下面會詳細闡述。

四、content area，見下圖標註：

content area 是一種圍繞文字看不見的box。content area的大小與font-size大小相關。

正常的圖文混排
默認狀況下，圖片與文字混排應該是這個樣子：圖片與文字基線對齊，圖片與文字在同一行上，以下圖所示：

上圖中，圖片爲一個inline boxes，兩邊的文字也是inline boxes。因爲line boxes的高度是由其內部最高的inline boxes的高度決定的，因此這裏line boxes的高度就是圖片的高度。此時圖片與文字是同一box類型的元素（都是inline boxes），是在同一行上的，因此，默認狀態下，一張圖片只能與一行文字對齊。而要想讓一張圖片要與多行文字對齊，您惟一能作的就是破壞正常的line boxes模型。

含有浮動屬性的圖片與文字
先看一下圖片添加了float:left樣式後的表現，見下圖：

剛纔說過，正常狀況下，圖片自身就是個inline boxes，與兩側的文字inline boxes共同組成了line boxes，可是，一旦圖片加入了浮動，狀況就徹底變了。我認爲是浮動完全破壞了img圖片的inline boxes特性，至少有一點我能夠確定，圖片的inline boxes不存在了，被惡魔附體，變身了，而這個惡魔就是浮動。一旦圖片失去了inline boxes特性就沒法與inline boxes的文字排在一行了，其會從line boxes上脫離出來，跟隨自身的方位屬性，靠邊排列。這種狀態跟限制性內切酶起做用幾乎一致，一條基因鏈上(line boxes)有不少的基因(inline boxes)，而後限制性內切酶(float)會切除特定的DNA序列，此序列(float元素)就會從基因鏈上脫離出來。

這個從line boxes上脫離的浮動元素其實就是一個軀體，一個空殼子，表象。由於其沒有inline boxes。有人可能會問，沒有inline boxes就沒有唄，有什麼大不了的？非也非也！這個inline boxes很個很重要的概念。我曾在「css行高line-height的一些深刻理解及應用」一文中提到太高度的本質，這裏有必要再講一遍。

在目前的CSS的世界中，全部的高度都是有兩個CSS模型產生的，一個是box盒狀模型，對應CSS爲」height+padding+margin」，另一個是line box模型，對應樣式爲」line-height」。前者的height屬性分爲明顯的height值和隱藏的height值，所謂隱藏的height值是指圖片的高度，一旦載入一張圖片，其內在的height值就會起做用，即便您看不到」height」這個詞。然後者針對於文字等這類inline boxes的元素（圖片也屬於inline boxes，但其height比line-height做用更兇猛，故其inline boxes高度等於其自身高度，對line-height無反應），inline boxes的高度直接受line-height控制（改變line-height文字拉開或重疊就是這個緣由），而真正的高度表現則是由每行衆多的inline boxes組成的line boxes（等於內部最高的inline box的高度），而這些line boxes的高度垂直堆疊造成了containing box的高度，也就是咱們見到的div或是p標籤之類的高度了。因此，對於line box模型的元素而言，沒有inline boxes，就沒有高度了，而浮動卻偏偏作了這麼齷齪的事情，其直接將元素的inline boxes也破壞了，因而這些元素也就沒有了高度。

咱們所處的這個世界時須要壞人來維持平衡的。武俠世界裏不是常有要消滅某個超牛叉的大魔頭時，會有人修煉魔功與之抗衡嘛。浮動彷佛就是這樣的一個角色，在網頁最初的時候就是顯示一些圖片的文字啊什麼的，所須要的佈局也就那麼幾個，其中之一就是文字環繞圖片顯示了，但是怎麼實現這樣的效果呢？聰明的CSS開發者就創造了一個修煉「魔功」的float屬性，其做用就是破壞line boxes模型好讓文字環繞圖片顯示，最後實現了嗎？確實實現了。還記得我屢次說到的浮動的意義嗎——只是用來讓文字環繞圖片而已，而要實現這個就須要用到浮動的「破壞性」。

沿用上面圖片的例子。浮動破壞了圖片的inline box，產生了兩個結果：一是圖片沒法與文字同行顯示，脫離了其原來所在的line box鏈；二是沒有了高度（無inline box -> 無line box -> 無高度）。而這些結果偏偏是文字環繞圖片顯示所必須的。

文字環繞圖片顯示的緣由
先看下面的flash動畫演示（點擊按鈕開始）：

動畫所演示的關鍵點其實就是上面的一系列分析與講解，即「包裹與破壞」！包裹是讓標籤佔據的空間水平收縮，破壞是破壞的inline box。正如上面講解的，inline boxes是高度造成的基礎，浮動破壞了inline boxes也就沒有高度可言了。真是因爲浮動元素沒有了inline boxes，沒有了inline boxes高度，才能讓其餘inline boxes元素從新整合，環繞浮動元素排列。

咱們如今假設浮動沒有破壞inline boxes，那麼雖然圖片會靠左顯示，可是其會與文字造成新的高度包絡線（同類聚合），且只能與一行文字造成line box，沒法實現文字環繞效果，因此浮動破壞inline boxes是必須的。

咱們能夠拿浮動元素與絕對定位元素作對比或許能夠幫助理解。與浮動元素同樣，絕對定位元素也具備「包裹性」，此「包裹性」適用於任何元素。那麼，浮動元素與絕對定位元素的差異在哪裏呢？我以爲最主要的差異在於：絕對定位的元素脫離了文檔流，而浮動元素依舊在文檔流中；而這形成的顯示上的差別就是：同處於文檔流中的文字實體不會與浮動元素重疊，而會與絕對定位元素重疊。這就是文字環繞顯示的重要緣由之一：雖然圖片實際佔據的高度爲0，可是因爲其寬度實體存在（包裹性），一樣是content area 實體的文字不會與之重疊（外部的容器盒子containing box(p,div,ul,li)會重疊），這就比如籃球場上站了個植物人，雖然其幾乎不可能得分，運球之類，可是他的實體在那裏，它能夠阻擋同一水平空間上的同一類型的個體（即人）直接穿過去，要經過，得繞道。可是其沒法阻擋整個球隊的向前推動。見下圖（firebug顯示截圖）：

5、浮動的非本職工做

浮動的本職工做是讓匿名inline boxes性質的文字環繞圖片顯示，而其餘全部用浮動實現的效果都不是浮動應該作的事情，我稱之爲「非本職工做」。

或許咱們並無過多的深思，把一些實際上不是浮動該乾的事情看成「這必須用浮動來實現」。舉個常見的例子，列表顯示，見下面的圖，截自淘寶新版首頁：

我不看代碼就知道是用浮動實現的，我用firebug一看，果真是，不只浮動，並且定寬。ps:要是在幾個月之前，我會以爲這實在有待改進，不過如今個人心態寬了，佈局思想不一樣而已，沒有孰對孰錯之分。

我能夠確信，浮動這個屬性誕生的那天壓根沒有想到本身會要作這樣的事情，原本它覺得本身就讓文字環繞顯示就OK了，功德圓滿了，結果，在web2.0的時代，其卻在頁面佈局中被濫用。可能有人會反駁，你何處此言，有何證據？

咱們只要靜下心來好好想一想浮動的本質，實現的原理，就能夠知道爲何浮動本不該該用來對頁面進行佈局。還記得上一部分所說的浮動的本質嗎？即「包裹與破壞」。咱們能夠用這個（「包裹與破壞」）解釋爲何浮動可讓li這類block水平的元素水平排列。

單個無浮動的li元素

看下面的HTML代碼：

<ul style="width:440px;">
    <li style="border:4px solid #ff6633; background:#ffffc0;"><img src="../image/border.png" /></li>
</ul>

結果以下圖（截自Firefox瀏覽器，無其餘樣式干擾，下同）：

這裏的li元素爲何會有高度？若是您認真讀過前半部份內容關於line boxes模型與高度的關係的內容，應該知道，因爲圖片沒有應用float屬性，其自己有一個正常的inline box，這個inline box高度等於圖片的height，在這行元素中，圖片這個inline box的高度最高，因而傳遞給了line box，line box是個真正意義上的高度，直接做用於containing box（就是這裏的li元素，使li元素有一個高度）。理解了這個您就會明白爲何要是這裏的圖片添加了float屬性，li高度會塌陷了：浮動破壞了inline box。這個後面會詳細講解。

這裏的li沒有添加float屬性，能夠見到li寬度100%自適應於父ul標籤。一切顯得那麼的和諧！

單個左浮動的li元素

看下面的HTML代碼：

<ul style="width:440px;">
    <li style="border:4px solid #ff6633; background:#ffffc0; float:left;"><img src="../image/border.png" /></li>
</ul>

結果以下圖：

相比上面而言，這裏多了個float:left;，浮動的「包裹性」一目瞭然：水平方向上，li寬度緊貼內部元素。我在前文曾說過這麼句結論性的話：「撇開浮動的‘破壞性’，浮動就是個帶有方位的display:inline-block屬性」。這不難理解，您能夠講這裏的float:left;改爲display:inline-block;最後實現的效果基本上就是同樣的。display:inline-block將對象呈遞爲內聯對象，可是對象的內容做爲塊對象呈遞。所謂對象呈遞爲內斂對象就是元素呈遞爲inline box，因此浮動「包裹性」所產生的結果就是使得元素轉爲了line box模型中的inline box元素。

浮動的「包裹性」讓元素變成相似於inline box的元素，而浮動的「破壞性」正是破壞inline box元素的，這其中豈不有矛盾。其實非也，對於block水平的這類塊狀元素須要先讓其變成相似效果的內聯元素，而後再破壞之，實乃先誘拐再姦殺的生動實例啊！

又是我反覆提到的，浮動破壞了inline box，也就是破壞了高度，因此這裏含有浮動屬性的li元素其實是沒有高度的。因此呢，要是後面還有一樣的li標籤的話，就會水平對齊排列的。以下：

多個左浮動的li元素

看下面的HTML代碼：

<ul style="width:440px;">
    <li style="border:4px solid #ff6633; background:#ffffc0; float:left;"><img src="../image/border.png" /></li>
    <li style="border:4px solid #ff6633; background:#ffffc0; float:left;"><img src="../image/border.png" /></li>
</ul>

結果以下圖：

左浮動的li元素和無浮動的li元素

看下面的HTML代碼：

<ul style="width:440px;">
    <li style="border:4px solid #ff6633; background:#ffffc0; float:left;"><img src="../image/border.png" /></li>
    <li style="border:4px solid #ff6633; background:#ffffc0;"><img src="../image/border.png" /></li>
</ul>

結果以下圖：

後面一個li無float屬性，直接無視前面的float li元素，寬度100%顯示，並且與float屬性的li同一水平線排列，爲什麼？由於浮動破壞了li的實際高度（緣由我講得太屢次了），只是圖片是個實體，沒法與一樣實體的同一文檔流的圖片重合，因此圖片靠在一塊兒。

6、證據

1. 首要證據

前文是着重分析了浮動的「本職工做」：文字環繞顯示；本文着重分析了浮動的「非本職工做」：列表佈局；二者都是用的一樣的原理解釋的，那麼有什麼證據能夠證實「頁面佈局」不是浮動的「本職工做」呢。答案關鍵字就是：高度塌陷。

我在多個地方濃墨重彩的講浮動與高度的關係，浮動使高度塌陷的緣由，本身都以爲嘮叨的太多了，這裏再也不講。直接講些實際的東西。

您是否發現，浮動佈局會讓父標籤高度缺失，可是實現文字環繞圖片效果的時候父標籤無需清除浮動。仍是上面的例子，咱們看看多li元素浮動時ul標籤高度在哪裏，咱們能夠給ul加個邊框屬性作測試，測試代碼以下：

<ul style="width:440px; border-top:4px solid #a0b3d6; border-bottom:4px solid #34538b;">
    <li style="border:4px solid #ff6633; background:#ffffc0; float:left;"><img src="../image/border.png" /></li>
    <li style="border:4px solid #ff6633; background:#ffffc0; float:left;"><img src="../image/border.png" /></li>
</ul>

結果以下圖：

上圖顯示ul高度爲0，這是必然的，正常的，應該的。您要是在IE下看到ul有高度，認爲這是Firefox等瀏覽器有問題就錯了，您把ul的width屬性去掉，看看，會發現IE下ul高度也爲0，這是IE的layout做祟。至於爲何ul高度爲0，我前面不少地方都已經講了，再也不說了。可是，從中咱們能夠看到，浮動本不是用來列表佈局的，而是用來使元素環繞顯示的，由於元素環繞（例如文字），其自身是含有inline boxes高度的，這是inline水平的元素造成高度的基礎，因此，雖然浮動元素沒有高度，可是其周圍環繞的元素是有高度的，只要環繞元素比浮動元素高度高，父標籤無高度的問題天然也就沒有了，可是純粹一堆浮動元素會有高度嗎？沒有。因此浮動元素塌陷的問題根本就不是瀏覽器的bug，而是咱們沒有正確地深刻地瞭解浮動，是咱們本身使用不當，由於浮動本不該該用在這裏的。

2. 其餘證據

爲何說浮動的本職工做不是頁面佈局而應該是是元素環繞呢。還有其餘些證據。

歷史

CSS剛誕生的時候，那時候的網頁仍是表格佈局的時代，能顯示幾張圖片就不錯了，複雜的列表顯示，佈局啊這些概念仍是很淡薄的，浮動出現的意義就是讓文字可以環繞圖片顯示而已，就如word般。

現象

Google是目前互聯網領域的老大，技術很牛叉，毋庸置疑，可是，當我發現它全部的頁面幾乎都是表格佈局的時候，很詫異；還有twitter，也是表格佈局的；

爲何這些頂尖的web網站使用表格佈局，而不跟隨潮流呢，起初我是百思不得其解。如今，我是明白了，這麼作是有他的道理的，難道要用一堆浮動的元素去佈局嗎？這不是浮動該乾的事情。並且，浮動是個很很差惹的魔鬼。

7、浮動是個魔鬼、混球

浮動的存在就是個破壞。浮動效果的實現就是先破壞自身（揮刀自宮），而後影響別人。頁面中只要出現一個浮動，勢必有其餘元素受其影響。這是開發和維護中的一個定時炸蛋(敏感詞)。咱們想一想浮動的意義，只是讓文字環繞圖片顯示而已，因此其必須破壞自身模型和高度。可是，不知道幸運仍是不幸，浮動的這種置之死地然後生的特性竟然可讓元素佈局，加上其表面意思很好理解，兼容性還不錯，使用方便，因而在捨棄了table佈局的這個web時代裏，浮動成爲當前頁面佈局的主流。想一想，真是一件可怕的事情。

有些人可能沒有意識到浮動實際上是個很糟糕的東西，是CSS中的一個魔鬼。爲何，或許由於用浮動佈局頁面發現還行，即便偶爾出現些小bug，打打補丁也能夠解決。或許是由於沒有體會到非浮動元素和浮動元素在開發和維護上所消耗的成本精力的差異。有些人可能知道浮動這個屬性能不用就不用，可是因爲找不到更好的替代方法，因此仍是有不少地方使用了浮動佈局，例如選項卡，列表顯示等。

理論上而言，除了浮動的環繞效果以外，咱們使用浮動作的其餘工做均可以使用別的CSS屬性實現，並且大部分狀況是比浮動的效果好：首先沒有了清楚浮動一說，二是有關浮動的一堆bug也不會出現，三是元素間獨立了，不會像浮動同樣改變一個會影響其餘。可是，考慮到大多數人對CSS掌握的程度，以及瀏覽器的一些兼容性問題等，不少時候，咱們不得不使用看上去使用方面但潛在問題較大的浮動屬性。因此，有關浮動的一些特性的研究仍是頗有必要的，這就是下面的重點。

8、解決高度塌陷的問題 – 清除浮動

CSS中有個討論較多的話題就是如何清除浮動，清除浮動其實就一個目的，就是解決高度塌陷的問題。爲何會高度塌陷？何時會高度塌陷？塌陷緣由是：元素含有浮動屬性 – 破壞inline box – 破壞line box高度 – 沒有高度 – 塌陷。何時會塌陷：當標籤裏面的元素只要樣子沒有實際高度時會塌陷。因此呢，並非只要有浮動元素就會坍塌，就要清除的，CSS水平高低衡量的標準之一就是改用什麼樣式就用什麼樣式，很少用也很多用。

下面就來說講如何清除浮動，zxx:寫到這兒，一會兒輕鬆了。
IE下清除浮動準則很簡單，使元素haslayout就能夠了。如寬度值，高度值，絕對定位，zoom，浮動自己均可以讓元素haslayout。顯然，首選zoom:1;不會干擾任何樣式。非IE瀏覽器經常使用的是overflow屬性，overflow:hidden;或是overflow:scroll均可以，不過因爲後者常常一不當心出現滾動條，因此前者用的更多些。因爲現代瀏覽器都支持after僞類，因此經常也會用after寫入一個clear屬性的元素清除浮動。固然，最投機取巧的方法就是直接一個<div style="clear:both;"></div>放到看成最後一個子標籤放到父標籤那兒。下面小結這幾個方法。

1. 投機取巧法

就是直接一個 <div style="clear:both;"></div>放到看成最後一個子標籤放到父標籤那兒，此方法屢試不爽，兼容性強，使用方便，是初學時使用的上佳之選。可是我歷來不用，由於我看到的是個巨大的浪費，浪費了一個標籤，並且只能使用一次，我我的是沒法容忍的，因此這個方法不推薦。並且有時候一不留神中間多了個空格會產生一段空白高度的。

2. overflow + zoom方法

.fix{overflow:hidden; zoom:1;}

此方法優勢在於代碼簡潔，涵蓋全部瀏覽器，可謂不錯的選擇啊。不過也是有問題的，就是這個overflow:hidden;是個小炸蛋，要是裏面的元素要是想來個margin負值定位或是負的絕對定位，豈不是直接被裁掉了，因此此方法是有不小的侷限性的。我通常不用這個方法，只是有時候順便去除浮動時用用。

3. after + zoom方法

先來簡單講講after，所謂after，就是指標籤的最後一個子元素的後面。因而呢，咱們能夠用CSS代碼生成一個具備clear屬性的元素，其中的關鍵樣式就是content了。或許您從網上看到的content裏面的內容是」.」一個點，我了不少次，貌似隨便寫什麼東西都沒有問題，好比 content:'clear both';沒問題，或是 content:'張鑫旭'也是ok的。因而有：

.fix{zoom:1;}
.fix:after{display:block; content:'clear'; clear:both; line-height:0; visibility:hidden;}

這裏的line-height:0寫成height:0也是能夠的。此方法能夠說是綜合起來最好的方法了，我都是用這個樣式清除浮動的，不會影響任何其餘樣式，通用性強，覆蓋面廣，我很推薦哦。

9、float與JavaScript

JavaScript能夠改變CSS的屬性，其餘些屬性還好，可是這個float值得一說，爲什麼呢，由於float貌似是JavaScript中的一個關鍵字，不能使用obj.style.float="left";這樣的句子。得使用其餘寫法。

IE瀏覽器：

obj.style.styleFloat = "left";

其餘瀏覽器：

obj.style.cssFloat = "left";

清除浮動的各類技巧是什麼？

Float是很普便的。衆所周知，可使用他製做佈局和網格系統，而且兼容全部瀏覽器。你們都知道，浮動會讓元素塌陷。即被浮動元素的父元素不具備高度。例如一個父元素包含了浮動元素，它將塌陷具備零高度。你能夠按下面的方法處理：

使用clearfix(知道Micro clearfix能夠加分)
父元素浮動也是一種方法
父元素使用overflow屬性並設置visible值

建立一個BFC能夠加分。可能要嵌套一些東西，如：<br style="clear: both;">。

做爲獎勵的問題，你能夠向他們問比較使用inline-block仍是float建立一個網格。好的答案：不管哪一種方式有問題。使用inline-block，你須要處理空白問題，使用float你須要清除浮動。

Sprites是什麼和爲何要使用他們？你是如何建立他們？有可能替代Sprites的方法是什麼？

Sprites本質是多張圖片拼成一張圖片。爲了提升性能的緣由，使用它們。通常來講，最慢一個網站能夠作的是請求一個資源。一個網站的請求須要越少，速度越快。快就等於好。多個請求合成一個請求就是好。

問他們如何讓Sprites就搞定，他們其實很是熟悉他們。手動建立Sprites固然是一種可能性，但它並非很是高效的。有一些工具能夠提升效率，例如：SpriteCow、SpriteMe、Spriting with Compass或者Grunticon。聽到這些部是很是有趣的。

Sprites是柵格圖像。當問到替代品時，好的答案可能都是與事實相關，Sprites一般爲Icons和Icons不是須要光柵。SVG圖標，字體圖標，字符編碼等等。

原文：http://www.cnblogs.com/jscode/archive/2012/07/10/2583856.html

http://www.cnblogs.com/jscode/archive/2012/07/08/2581779.html

http://www.cnblogs.com/leejersey/p/3393283.html

http://www.zhangxinxu.com/wordpress/?p=583

http://www.zhangxinxu.com/wordpress/?p=594

1. 2015第11週五
2. 實訓第五週（2）
3. 2015第6週二
4. 2015第50週二
5. 2015第23週六
6. 2015第22週日
7. 三週第五次課（4月10日）
8. 2015第6週一網摘
9. Java學習第五週(2)--集合
10. 第 10 周
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• CSS 指南 - 網站建設指南
• 使用Rxjava計算圓周率
• RxJava操作符（五）Error Handling

相關標籤/搜索

每日一句

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