学习记录306@CSS中auto居中的问题

对于标准流而言，在设置了宽度高度后，使用margin:0 aotu;即可实现盒子的居中：

@charset "utf-8";
/* CSS Document */
*{
     margin:0;padding:0;}
li{
     list-style:none;}
a{
     text-decoration:none;}



div{
     
	width:100px;
	height:100px;
	background-color:red;
	margin:0 auto;
	}




"utf-8">

"stylesheet" type="text/css" href="css/shoos.css"/>

但是以上说的标准流，如果是非标准流，比如变成了浮动流，就无法实现auto剧中了：

@charset "utf-8";
/* CSS Document */
*{
     margin:0;padding:0;}
li{
     list-style:none;}
a{
     text-decoration:none;}



div{
     
	float:left;/*加了浮动*/
	width:100px;
	height:100px;
	background-color:red;
	margin:0 auto;
	}

什么原因呢？我的理解是，auto居中的本质是让盒子平分剩下的空间，也就是让盒子左右边距平分水平方向的剩余空间，这样就实现了水平居中。

但是为什么浮动后就不能使用了呢？我的理解是浮动流脱离了标准流，也就是漂浮了起来，本身就不占据原先的位置，因此设计的时候就不按照标准流的方式进行操作了。
还需要注意的是，相对定位后，元素占有原先的位置，依然具有原先的元素类型，因此依然还是标准流，还可以使用auto进行居中操作，但是对于绝对定位，因为绝对定位后，元素不占有原先的位置，这很像浮动，因此就不能使用auto进行居中操作了。具体的自己用代码实践吧！
另外需要注意，垂直方向不能使用margin:auto 0;进行设置居中，原因不解，可能就是规定。