flaot浮动的原因与副作用
float中的四个参数
left，right，none，inherit
float浮动的原因
使用浮动之后，元素会脱离标准的文档流。（标准的文档流就是按照不同的元素种类，如块元素，行元素按照各自的特点去排列显示，虽然属性不同，但都是按照从上到下，从左到右的顺序进行排列）
float浮动的副作用
两个块级元素，会被浮动元素覆盖
这里写图片描述
<styletype="text/css">
.box{
border:4pxsolid#000000;
width:200px;
height:200px;
display:inline-block;
}
.itemSmall_1{
background-color:chartreuse;
width:40px;
height:40px;
border:2pxsolid#000000;
/*float:left;*/
}
.itemSmall_2{
background-color:chartreuse;
width:40px;
height:40px;
border:2pxsolid#000000;
float:left;
}
.itemBig{
background-color:blue;
width:150px;
height:150px;
border:2pxsolid#000000;
}
</style><body>
<divclass="box">
<divclass="itemSmall_1">
</div>
<divclass="itemBig">
</div>
</div>
<divclass="box">
<divclass="itemSmall_2">
</div>
<divclass="itemBig">
</div>
</div>
</body>
*一个块元素，一个行内元素。行内元素如文字会浮动在浮动元素的周围，为浮动元素留出空间。
这里写图片描述
<styletype="text/css">
.box{
border:4pxsolid#000000;
width:200px;
height:200px;
display:inline-block;
vertical-align:top;
}
.itemSmall_1{
background-color:chartreuse;
width:40px;
height:40px;
border:2pxsolid#000000;
/*float:left;*/
}
.itemSmall_2{
background-color:chartreuse;
width:40px;
height:40px;
border:2pxsolid#000000;
float:left;
}
.itemBig{
background-color:blue;
width:150px;
height:150px;
border:2pxsolid#000000;
}
</style>
<body>
<divclass="box">
<divclass="itemSmall_1">
</div>
<divclass="itemBig">
</div>
</div>
<divclass="box">
<divclass="itemSmall_2">
</div>
行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素</div>
</body>
*两个块级元素浮动，出现父元素塌缩
这里写图片描述
<styletype="text/css">
.box{
border:4pxsolid#000000;
float:left;
}
.itemSmall_2{
background-color:chartreuse;
width:40px;
height:40px;
border:2pxsolid#000000;
float:left;
}
.itemBig2{
background-color:blue;
width:150px;
height:150px;
border:2pxsolid#000000;
float:left;
}
</style>
<body>
<divclass="box">
<divclass="itemSmall_2">
</div>
<divclass="itemBig2">
</div>
</div>
</body>
本文转载自中文网
本文转载自中文网
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c55467.shtml
