不是所有布局都需要清除浮动，谁影响布局，我们清除谁
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，取值越大，定位元素在层叠元素中越上，后面数字不能加单位，只有绝对定位，相对定位，固定定位才有此属性
