嘿，我明白你遇到的麻烦了——用float布局加<br>换行时，每一行的方块总是偏移20px，完全没法对齐成整齐的大方块对吧？

问题根源 #

你遇到的偏移本质上是浮动元素没有被正确清除，再加上<br>标签自带的默认行高，和浮动元素的margin叠加在一起，导致下一行的方块没办法回到容器最左侧，而是跟着上一行的浮动元素“跑”了。

修复方案 #

我给你调整了代码，主要做了这几件事：抽离公共样式减少冗余，用清除浮动的方式替代<br>换行，同时优化了margin避免叠加问题。

修改后的CSS：

/* 把红蓝方块的公共样式抽出来，减少重复代码 */
.square {
    width: 20px;
    height: 20px;
    margin: 3px 3px 0 0; /* 调整margin顺序，避免上下margin叠加 */
    float: left;
}
.box { background-color: red; }
.box1 { background-color: blue; }

/* 清除浮动的通用类，让每一行结束后重置浮动状态 */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

修改后的PHP：

<?php
for($a=0;$a<4;$a++){
    // 第一组8个方块，用clearfix容器包裹，结束后清除浮动
    echo "<div class='clearfix'>";
    for($i = 0; $i < 4; $i++) {
        echo "<div class='square box'></div>";
        echo "<div class='square box1'></div>";
    }
    echo "</div>";
    
    // 第二组同样用clearfix包裹
    echo "<div class='clearfix'>";
    for($i = 0; $i < 4; $i++) {
        echo "<div class='square box'></div>";
        echo "<div class='square box1'></div>";
    }
    echo "</div>";
}
?>

为什么这样改能解决问题？ #

• 清除浮动：clearfix类通过伪元素在容器末尾添加一个不可见的块级元素，强制清除左右浮动，确保下一组方块从新的一行最左侧开始排列，不会被上一行的浮动元素干扰。
• 优化margin：把margin改成3px 3px 0 0，只保留右下的外边距，避免上下margin叠加导致行间距异常。
• 抽离公共样式：让代码更简洁，后续要调整方块大小、间距时，只需要改一处就可以了。

之前用<br>换行的问题在于：<br>只是插入一个换行符，但浮动元素并没有被“收住”，下一行的方块会继续跟着上一行的浮动元素排列，再加上<br>本身的行高，就出现了你看到的偏移情况。

内容的提问来源于stack exchange，提问作者Nikodem Miłuch