扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
*一个块元素,一个行内元素。行内元素如文字会浮动在浮动元素的周围,为浮动元素留出空间。
这里写图片描述
.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浮动的原因及怎么解决这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流