这篇文章主要讲解了“css中flaot浮动的原因及怎么解决”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“css中flaot浮动的原因及怎么解决”吧！
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;
}
.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;
}
.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>
感谢各位的阅读，以上就是“css中flaot浮动的原因及怎么解决”的内容了，经过本文的学习后，相信大家对css中flaot浮动的原因及怎么解决这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！
