css小技巧之浮动，居中，周围阴影，relative妙用

    css在布局和样式微调中，有很多小技巧，今天总结一些小妙招，这些方法基本上很好用，而且不会轻易弄混淆。

    我们为了看出效果，将页面做了一些修饰，比如很多地方加上了边框，设置了背景色，主要是为了更直观的表现我们的效果。首先贴出一段主体的样式：

/**reset*/
html,body,div,p,span,h1,h2,h3,h4,h5,h6,input{margin:0;padding:0;font-weight:normal;}
#root{
	width:1000px;
	margin:0 auto;
}
.tips{
	color:red;
	font-weight:bold;
	font-size:18px;
	margin:20px 0;
}
.box{
	
}
.box-header,.box-footer{
	border:1px solid #ddd;
	border-radius:3px;
	padding:5px;
}
.box-content{
	margin:10px auto;
}
.box-item{
	width:100px;
	height:100px;
	border:1px solid #000;
	border-radius:3px;
}
.bg-red{
	background:red;
}
.bg-blue{
	background:lightblue;
}
.bg-green{
	background:lightgreen;
}

    1.1、首先要说的是浮动，我们知道，浮动的元素，会因为脱离了默认的布局，周围的元素，会因为浮动而发生改变，为了消除浮动带来的影响，我们需要清除浮动，所以浮动最主要的就是清除浮动，默认我们需要在父元素上清除浮动，无论是左浮动，还是右浮动，或者左右浮动都有，我们均需要在父级元素上做清除浮动的操作。

    浮动与清除浮动的主要样式代码如下：

.clearfix{
    zoom:1;
}
.clearfix:before,.clearfix:after{
	display:table;
	height:0;
	content:'';
}
.clearfix:after{
	clear:both;
}
.fl{
	float:left;
}
.fr{
	float:right;
}

    HTML部分：

<h2>1-1、浮动原生样式</h2>
<div class="box-header">this is header</div>
<div class="box-content clearfix">
   <div class="box-item bg-red fl">left</div>
   <div class="box-item bg-blue fr">right</div>
   <!--
   <div class="box-item bg-green fr">center</div> 
   -->				   
</div>
<div class="box-footer">this is footer</div>

    展示效果：

    对于这种浮动的效果，一个居左，一个居右的情况，在实际应用中也会有很多，可能不是这种效果，但是基本逃不出这样的技巧。重点样式在于父级元素上的.clearfix，以及他们的伪类样式.clearfix:before与.clearfix:after。核心代码在于：

    .clearfix:before,.clearfix:after{ display:table;height:0;content:'';}

    .clearfix:after{ clear:both;}

    默认的浮动，我们需要做一些工作，父元素需要设置清除浮动样式，子元素设置浮动，我们需要注意的是子元素有三个的情况，这时候，如果右浮动是两个的时候，我们需要将浮动在最右边的元素放在中间浮动的元素左边，如果不这么设置，最终靠中间的元素会被显示在最右边，很奇怪，这种设置，好像很不容易理解。这也是一种技巧。 

     1.2、在css3中，有一种flex布局，也可以实现这种左右布局的情况，他的实现很巧妙，主要在父级元素上设置子元素的对齐属性。

    css样式很简单，如下：

.box-content-flex{
	margin:10px auto;
	display:flex;
	justify-content:space-between;
}

    HTML代码如下：

<h2>1-2、浮动flex样式</h2>
<div class="box-header">this is header</div>
<div class="box-content-flex">
   <div class="box-item bg-red">left</div>  
   <div class="box-item bg-blue">right</div>				   
</div>
<div class="box-footer">this is footer</div>

    html部分和默认通过浮动的方式没有区别，唯一的区别就是在于父级元素上的.box-content-flex这个