不是所有布局都需要清除浮動，誰影響布局，我們清除誰
1：清除浮動的本質
清除浮動主要為了解決父級元素因為子級浮動引起内部高度為0 的問題
其實的本質叫閉合浮動會更好一些。清除浮動就是把浮動的盒子圈到裡面，父盒子閉合出口和入口，不讓他們出來影響其他元素。
2：清除浮動的方法
額外标簽法
父級添加overflow屬性方法
使用after僞元素清除浮動
使用before和after雙僞元素清除浮動
a：額外标簽法：最後一個浮動标簽後面添加一個标簽，清除浮動
如果清除了浮動，父親會自動檢測孩子高度，以最高的一個為準
代碼：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.father{
width: 1080px;
border: 1px solid black;
/*如果清除了浮動父親會自動檢測孩子高度，以高的為準*/
}
.son1{
width: 100px;
height: 200px;
background: red;
float: left;
}
.son2{
width: 100px;
height: 200px;
background: blue;
float: left;
}
.mather{
width: 100px;
height: 200px;
background: black;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<div class="father">
<div class="son1"></div>
<div class="son2"></div>
<div class="clear"></div>
<!-- 額外标簽法，在最後一個浮動标簽添加一個标簽，清除浮動 -->
</div>
<div class="mather"></div>
</body>
</html>
沒有清除浮動效果圖：
清除浮動效果圖：
優點：通俗易懂，書寫友善
缺點：添加許多無意義的标簽，結構化較差
b:給父親添加overflow屬性
可以給父級添加：overflow為hidden|auto|scroll都可以實作
優點：代碼簡潔
缺點：内容增多的時候，會影藏掉不會自動換行的内容，導緻内容隐藏掉，無法顯示需要溢出内容
c:雙僞元素清除浮動
d：after僞元素清除浮動
visibility:hidden 容許浏覽器渲染，但是不顯示出來
3：相對位置
元素定位屬性：定位模式和邊偏移兩個部分
靜态定位的唯一用處：取消定位
相對定位(占位置)：脫标，占位置
注意：
相對定位組重要的一點是，他可以通過邊偏移改變位置，但是原來的位置任然占有
每次移動的位置，都是u以自己的左上角為基點移動，相對于自己
絕對定位(不占位置)：
若沒有父元素沒有定位，則以目前浏覽器螢幕為标準對齊
絕對定位是将元素依據最近的已經定位（絕對，相對，固定）的父元素(祖先)進行定位
說完相對定位和絕對定位，我們來看一個口訣
子絕父相
父親要用相對定位，兒子要用絕對定位
原因是：相對位置占位置，父元素的盒子裡面肯定是要有内容的，是以肯定要為他的兒子們占位置。
而子元素是要實作各種花裡胡哨的效果，是以有的不需要占位置，這時用絕對定位最好，讓他們自由的飄
我們來看一個小案例，诠釋了什麼是子絕父相
代碼
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>哈根達斯</title>
<style type="text/css">
div {
width: 310px;
height: 190px;
margin:50px auto;
border: 1px solid black;
position: relative;
padding: 5px;
}
#price{
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div>
<img src="img/價錢.png" id="price" width="50" height="50">
<img src="img/ha.png" width="310" height="190" id="ha">
</div>
</body>
</html>
效果圖
4：定位的盒子居中對齊
加了定位和浮動的盒子，
margin: 0 auto;就失效了，但是margin-left沒有失效
首先left：50%，父盒子一半的大小
然後走自己外邊距負的一半值就可以了
代碼：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
position: absolute;
left: 50%;
background: pink;
margin-left: -100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
利用定位加浮動的小案例
代碼
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#h {
margin: 0 auto;
width: 1259px;
height: 472px;
position: relative;
}
#nav {
width: 790px;
height: 80px;
background: black;
list-style: none;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -345px;
}
#nav li {
width: 135px;
height: 80px;
float: left;
margin-left: 15px;
list-style: none;
}
#nav a {
width: 135px;
height: 80px;
line-height: 50px;
text-align: center;
display: block;
text-decoration: none;
}
#nav a:hover {
background: #f4f4f4;
}
</style>
</head>
<body>
<div id="h">
<img src="img/shunfen.png" width="1259" height="472">
<div id="nav">
<ul>
<li><a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >訂單運輸</a></li>
<li><a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >訂單運輸</a></li>
<li><a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >訂單運輸</a></li>
<li><a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >訂單運輸</a></li>
<li><a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >訂單運輸</a></li>
</ul>
</div>
</div>
</body>
</html>
效果圖
簡單淘寶輪播圖，沒有特效
代碼：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>輪播</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.lunbo {
width: 592px;
height: 355px;
background: pink;
margin: 100px auto;
position: relative;
}
.lunbo a {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
margin-top: -50px
}
.left {
left: 0;
background: url(img/left.png) no-repeat;
}
.right {
right: 0;
background: url(img/right.png) no-repeat;
}
.lunbo ul{
width: 110px;
height: 18px;
background: rgba(255,255,255,.3);
position: absolute;
bottom: 18px;
left: 50%;
margin-left: -55px;
border-radius: 8px;
}
.lunbo ul li{
width: 8px;
height: 8px;
background: black;
float: left;
border-radius: 50%;
margin: 7px;
}
.lunbo .current{
background: red;
}
</style>
</head>
<body>
<div class="lunbo">
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="left"></a>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="right"></a>
<ul >
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
效果圖
分析一下：做輪播圖。用到了盒子模型，浮動，定位。用到的是css的精華，這也是為什麼面試讓你手撕輪播圖
首先，輪播圖由五部分組成。盒子，圖檔，左右箭頭，底部圓點
圖檔和左右箭頭，底部圓點屬于兄弟關系。他們與外部的盒子是屬于父子關系
a：先根據圖檔大小，确定盒子大小。
此時盒子的寬高，位置要寫明白。其次是位置，由于用定位，且這個是父級，是以用relative
b：盒子裡面放圖檔，而且大小一緻，是以按順序放圖檔就可以
c:箭頭部分。這裡比較有考究。首先兩個圖檔有相同之處，都是子元素，都用絕對定位，距離頂部的距離，都一樣。是以可以單獨寫成一個。下面左邊和右邊載單獨寫就可以。左邊left0，右邊right0
d底部是一個盒子ul，先給他指定大小，定位，
li負責小圓點部分。大小，圓角，浮動，外間距。
e：最後的目前顔色。這裡注意權重問題，如果單獨寫一個，權重不夠，不能覆寫掉原來的顔色，
最後一個固定定位
fixed(認死理型)，不占位置，完全脫标，
固定定位是特殊的絕對定位，就好比正方形是特殊的矩形。隻不過fixed誰也不認，就認浏覽器！
固定定位是獨立的，不參與布局，是以遇到了，單獨寫就行!
用處，固定到螢幕兩側，固定到螢幕最上方。但是這是會出現一個問題，由于固定定位不占位置，下面内容會被他的高度高度覆寫。這是隻需要給内容加一個margin-top就可以了。
absloute(拼爹型)絕對定位，要看父級的定位，要以父級左上角為定位，一般是子絕父相。要是沒有父級，或者父級沒有定位，以浏覽器目前視窗為準
reletive(相對定位)(自戀型)，以自己左上角為标準定位，相對于自身定位
定位的模式轉換，固定定位和絕對定位和浮動一樣，搜存在隐式轉換。當你設定了這些屬性。如果是行内元素，這時你不用轉換成塊元素，也可以進行寬高設定。因為他已經轉化為行内塊。而且寬高就是本身文字寬高
案例：如果不給他設定寬，他是通欄顯示的
效果圖
但是給他設定浮動以後
你會發現什麼都沒有，因為浮動會進行隐式轉換，把它轉換成行内塊，行内塊我的寬高是根據文字的多少來決定的，現在，沒有設定寬，也沒有文字，是以也沒什麼也沒有，包括設定的背景
以上說的是背景圖檔，但是插入圖檔就不一樣了，他是當文字來看的，是以不設定寬，進行浮動，也是會通欄顯示的
這也就是想要通欄顯示，加width:100%了
5 z-index疊放次序
代碼：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div {
width: 200px;
height: 200px;
position: absolute;
}
.red {
background: red;
z-index: 0;
}
.green {
left: 50px;
top: 50px;
background: yellow;
z-index: 1;
}
.black {
left: 100px;
top: 100px;
background: blue;
z-index: 2;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="green"></div>
<div class="black"></div>
</body>
</html>
效果圖
在css隻要想條調整重疊位置元素的堆疊順序，可以對定位元素應用z-index層疊定位屬性，z-index預設值為0，取值越大，定位元素在層疊元素中越上，後面數字不能加機關，隻有絕對定位，相對定位，固定定位才有此屬性