display:flex 遇到 clear:both 效果不对-优快云博客

本文探讨了在使用Flex布局时遇到的一个问题：当页面中存在清除浮动的代码时，原本预期的等分布局效果被破坏。通过对比Web端与小程序端的表现差异，最终定位到问题所在，并给出了具体的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小程序项目中遇到这样的布局（以下为A）

将该组件用的是flex布局，写完之后发现效果没有等分，如下图

然后自己手撸了一段代码test，发现一样的样式，在web端是实现了A布局，然后又新建了一个小程序页面，把我写的test代码填进去，发现效果也是A，这下就有点懵了，到底是什么影响了布局展示，然后又细看了代码，发现这样一句代码<div style='clear: both;'></div> ，把他注释掉之后，页面布局得以实现A样式。

下面是web端的测试css代码：

.icons-list {
width: 600px;
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: space-around;
position: relative;
flex-wrap: wrap;
border-radius: 10px;
background: #fff;
padding: 24px;

}

.icons-list .icon-box {
float: left;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 10px;
z-index: 1;
}

.icon-img {
width: 60px;
height: 60px;
}

.icon-text {
font-size: 12px;
color: #222;
line-height: 12px;
margin-top: 16px;
}

html部分：

注释掉<div style='clear: both;'></div> 之后的后前效果对比