一.width:auto和width:100%的區別
1.width:100%的作用是占滿它的參考元素的寬度。（一般情況下參考元素 == 父級元素，這里寫成參考元素而不是父級元素，在下面我會再細說）
2.width:auto也是以“占滿參考元素寬度”為目標。但不同的地方在於，它能根據margin和padding的值動態地調整width的值。當參考元素的寬度一定時，子元素的margin或者padding多一點，那么子元素的width就會少一點。
說白了width:auto試圖達成這一等式：子元素的width+padding（左和右）+margin（左和右） = 參考元素的的width(參考元素一般為父元素)
【舉個例子】：
<style type="text/css">
.outer{
width:200px;
height:100px;
border:1px solid black;
margin:20px;
}
.inner-100percent{
width: 100%;
height:100px;
background: darkcyan;
}
.inner-auto{
width:auto;
padding:0px 10px;
height:100px;
background:salmon;
}
</style>
<div class="outer">
<div class="inner-100percent"></div>
</div>
<div class="outer">
<div class="inner-auto"></div>
</div>
demo:
看起來一樣？其實不一樣，我們用控制台的盒模型的檢查器看一下：
在這里，10px的padding * 2 + width(auto) = 200px(參考元素的寬度)
我們再對上面CSS更改一下,將inner-auto的部分修改為：
.inner-auto{
width:auto;
padding:0px 10px;//設置左右內邊距為10px margin:0px 10px;//設置左右外邊距為10px
height:100px;
background:salmon;
}
demo:
10px的padding * 2 + 10px的margin*2 + width(auto) = 200px(參考元素的寬度)
【注意】：width:100%不會將自身的margin和padding包含計算在參考元素的width內，所以如果我們把inner-100percent的CSS部分改成：
.inner-100percent{
width: 100%;
height:80px;
padding:0px 10px;
background: darkcyan;
}
demo將變成：
在設置width:100%后，子元素“溢出”了父元素
【注意】寬度默認為width:auto，但高度默認height:0
二.浮動/定位對width:auto和width:100%的影響
1.浮動/定位對width:100%的影響
浮動/定位是通過改變元素width的參考基准來影響width:100%的，有以下三點規律
1.1 默認情況下：以它的父級元素寬度為參考基准
這也就是我們上面看到的demo所展示的
1.2:子元素相對定位，仍然以它的父級元素寬度為參考基准
我們給inner-100percent的style加上相對定位
.inner-100percent{
position:relative; width: 100%;
height:100px;
background: darkcyan;
}
demo:
證明毫無影響
1.3子元素絕對定位，則分兩種情況討論
<1>默認情況下以body元素寬度為參考基准
我們把inner-100percent對應的style改成：
.inner-100percent{
position:absolute; width: 100%;
height:100px;
background: darkcyan;
}
然后我們就會看到如下一個糟糕的場景，inner-100percent的寬度變成了body也就是全屏的寬度
那么當我們使用定位導致這種情況的時候應該怎么辦呢？看下面：
<2>若存在被定位的上層元素，則以距離最近的相對定位的元素寬度為基准：
我們給inner-100percent加上一個相對定位的父級元素：
<div class="outer">
<div style="position:relative;">
<div class="inner-100percent"></div>
</div>
</div>
demo:
於是又恢復正常了
1.4子元素浮動對width:100%無影響（這里不做展示）
2.浮動／定位對width:auto的影響
2.1默認情況下，width:auto占滿一行
不做展示
2.2子元素相對定位，無影響，仍占滿一行
不做展示
3.3子元素絕對定位，固定定位，浮動，width:auto等同於width:0
將上面的style改成：
.inner-auto{
position:absolute;//或position:fixed;或float:left
width:auto;
height:100px;
background:salmon;
}
此時對inner-auto
（注意inner-auto本來是有顏色的）
此時該div的寬度已被擠壓為0了，從控制台上看inner-auto:
所以，當我們在絕對定位，固定定位，浮動時候，要記得給元素設寬度。
三.margin的"層疊現象"
<style type="text/css">
*{margin: 0;padding: 0;}
.div{
width:100px;
height:50px;
margin: 10px;
border:1px solid black;
}
.div1{
background:seagreen;
}
.div2{
background: cornflowerblue;
}
.div3{
background: gold;
}
.div4{
background: lightcoral;
}
</style>
<body>
<div class="div div1">div1</div>
<div class="div div2">div2</div>
<div class="div div3">div3</div>
<div class="div div4">div4</div>
</body>
demo:
上下兩個div之間的距離為10px;嗯？為什么是10px呢，我們將4個div的margin都為10px,兩個div的上下距離不應該是10px +10px = 20px嗎？沒錯，在一般情況下（沒有浮動，不是行內框），並排的div 的margin可以彼此重疊,而且重疊后值為兩者中較大的那個
四.浮動將打破這種層疊關系，倘若我們給div1,dv2,div3加上浮動
.div2,.div3,.div4{
float: left;
}
demo:
間距變為20px，這時候margin已經不重疊了
五.浮動/定位對其他元素物理空間的影響
這首先要提到我們經常掛在耳邊的一個詞——“脫離文檔流”
脫離文檔流 == 不占據元素的空間（物理上）
.div2,.div3{
float: left;
}
demo:
其中float,position:absolute/fixed能夠脫離文檔流 ，而position:relative不能夠脫離文檔流
在這里，我們把脫離文檔流的那一部分元素歸為“浮動流”，而把沒有脫離文檔流的那一部分元素歸為“標准流”，那么：
1.浮動流順序排列，這個順序是和HTML中元素的順序一致的,HTMl中先浮動的元素排在前面，這個“前面”指的是靠近屏幕邊緣的一端，“后面指的是遠離屏幕的一端”
以上面的例子為基礎
.div1,.div2,.div3,.div4{
float: left;
}
.div1,.div2,.div3,.div4{
float: right;
}
2.浮動流的起始位置由最先設置浮動的元素未浮動時的位置決定
我們再回到上述的例子，div2,div3,div4向左浮動的時候
浮動流的起始位置被最先設置浮動的元素原本的位置決定了。其他元素的只能跟在“領頭浮動元素”的后面
但即使其他元素的沒有跟在“領頭元素”的后面，而是向相反方向浮動，也始終不能高於“領頭浮動元素”
.div2,.div3{
float: left;
}
.div4{
float:right;
}
3.浮動流本身並不會影響標准流元素的定位,但是卻影響着標准流文本的定位
如果我們仔細看一下五中開頭的demo會發現一個難以忍受的bug:
"div4"這個文本不是被包裹在div4這個元素里面嗎，為什么被浮動元素div2“懟”下來了？剛剛不是還說好浮動 ==脫離文檔流 == 不占其他元素的物理空間的嗎？對啊，這里說的是元素，並不是文本。浮動元素會影響文本的位置！
我們甚至可以無腦地推測，float的一開始設計的作用就是為了解決以下的這個問題——
讓文本環繞一個圖片，就像下面這個W3C的案例一樣：
4.浮動流位居標准流之上(也就是說浮動流的元素會覆蓋標准流的元素)
這個根據上面那個例子就可以看出來，這里就不多說了
六.實踐案例
好，說了這么多，還是用以上的知識點來一個實踐的案例比較痛快，下面這個案例是CSS布局方面的經典考題：兩列布局，左邊固定高寬，右邊自適應：
<style type="text/css">
*{margin: 0;padding: 0;}
.div{
border:1px solid black;
margin: 10px;
}
.left{
float: left;
width: 200px;
height:200px;
background:darkcyan
}
.right{
margin-left:230px;
height: 400px;
}
</style>
</head>
<body>
<div class="div left">我是div1</div>
<div class="div right">我是div2 我是div2 我是div2 我是div2 我是div2 我是div2 我是div2 我是div2 我是div2 我是div2 我是div2 我是div2 我是div2 我是div2</div>
</body>
demo:
【實現思路】：正如上面所說，浮動會脫離文檔流從而不占據其他元素的物理位置,而我們讓div1向左浮動了，這表示我們在考慮div2的布局的時候完全可以把div1當作不存在。那么這個時候又由於div2默認為width:auto;並且此時參考元素為body，那么設margin-left:230px;（略大於div1的寬度），那么由於width:auto會自動計算寬度，此時div2寬 = body寬度（全屏寬度）- 230px = 除去div1部分剩余的屏幕寬度，實現右欄自適應