Html 如何在浮动元素之间产生中断

我试图通过每1,10,11,20,21,30制作一个大图像来格式化我的照片墙，它是160*165，在两个大图像之间，它是85*80，有8个小图像

前五个元素完美地工作，就像一个大图像，然后是4个小图像，像一个大图像一样对齐//第一行

我想使第二行相同的模式，但与4个小来第一，然后来的大形象。但情况是，它首先显示3个小的一个，然后用左边的小的开始另一行（我想要的是使这四个小的一个形成一个正方形），我尝试使用一个换行符（在$I=7,17,27…）位置之后，但它不适用于浮点元素

<div style="width:350px"> 
    <?php
    $i=0;
    foreach($photo_array as $each){


        if($each!=''){
        $i++;

        $img_id=$username.$i;
         $pos=stripos($each,'&'); 
         $src=substr($each,$pos+1);

        $each_photo_string='user_data/post_img/'.$src;

        if(  (($i-1)%10==0) || ($i%10==0) ){
            echo '<img id="'.$img_id.'" class="p_photo_image" width="160"  height="165" style="margin-left:5px;float:left;"  alt="'.$each.'" src="'.$each_photo_string.'" >';
        }
        else{

                echo '<img id="'.$img_id.'" class="p_photo_image" width="85" height="80" style="float:left;margin-bottom:5px; margin-left:5px;"  alt="'.$each.'" src="'.$each_photo_string.'" >';
                if(($i%10)==7){
                    echo '<br>';
            }


        }

        }
    }

     ?>
</div>

---

如果有浮动对象，则不能使用

请尝试此操作，而不是

：

<div style="float:left; width:100%; height:1px; margin:20px 0; display:block;"></div>

---

您需要使用另一个浮动对象（带margin属性）作为中断

fyi

margin:20px 0px 20px 0px

与

margin:20px 0px

相同，如果我使用这个对象，在第二行中，它首先显示2个小对象，然后在下面用20px margin开始一个新行，继续显示另一个2，如果我将其更改为echo“”，则显示大的2；然而，前四个小的一个很完美，接着是一个大的一个，在顶部有一个边距it@KesongTse如果从我的解决方案中删除

margin

attribute，会发生什么情况？=

前四个小的像正方形一样对齐，这就是我想要的，但是接下来的大的，不是显示为与之前的正方形相同的高度，而是降低一个小的图像高度，然后显示