这篇文章主要讲解了“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;
}
*一个块元素，一个行内元素。行内元素如文字会浮动在浮动元素的周围，为浮动元素留出空间。
这里写图片描述
.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;
}
行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素
*两个块级元素浮动，出现父元素塌缩
这里写图片描述
.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;
}
感谢各位的阅读，以上就是“css中flaot浮动的原因及怎么解决”的内容了，经过本文的学习后，相信大家对css中flaot浮动的原因及怎么解决这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！
