这篇文章主要讲解了“css中flaot浮动的原因及怎么解决”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“css中flaot浮动的原因及怎么解决”吧！

创新互联的团队成员不追求数量、追求质量。我们经验丰富并且专业，我们之间合作时就好像一个人，协同一致毫无保留。成都创新互联珍视想法，同时也看重过程转化带来的冲击力和影响力，在我们眼中，任何细节都不容小觑。一直致力于为企业提供从空间域名、网站策划、网站设计、商城网站建设、网站推广、网站优化到为企业提供个性化软件开发等基于互联网的全面整合营销服务。

flaot浮动的原因与副作用

float中的四个参数

left，right，none，inherit

float浮动的原因

使用浮动之后，元素会脱离标准的文档流。（标准的文档流就是按照不同的元素种类，如块元素，行元素按照各自的特点去排列显示，虽然属性不同，但都是按照从上到下，从左到右的顺序进行排列）

float浮动的副作用

两个块级元素，会被浮动元素覆盖

这里写图片描述

.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;

}