浮动布局错误

浮动

在开发中，很多布局总是在不经意间给人意外，下面这个例子，在浏览器调试界面是完全没有问题的，包括移动端的适配，但是上线之后，发现问题真的好多
下面就记录记录，总结总结，反省反省

开始

代码我就不贴了，毕竟真的都是特别基础的，我还犯这种低级错误真的不应该啊，直接上图

上面的界面，我分为三部分，1和2齐平，3在下面

错误写法

下面的写法是错误的，以后不能再犯了，改个小bug上传一次服务器真的神烦，我都嫌弃我自己
起初是，1和2分别左浮动和右浮动，此时123是同级的，为父元素清除浮动之后，3自然排在下面。
可能因为图片的尺寸刚好和2的高度相同，所以布局并没有什么问题，在320px 375px 414px等设备下面是没有问题的
但是发布之后，由于用户的设备物理宽度是各种各样的，这个时候问题来了，就会看见下面这奇奇怪怪的布局。。。
一首凉凉送给自己

解决方法

解决的方法超级简单，给1和2一个父级，两个浮动的元素和3互不影响，造成上面的原因就是因为1和2的高度不可能完全相等，所以浮动之后就会存在占位的问题
我想给自己翻个白眼，毫无技术可言，艹