参差布局不成功方法一（float:left)_css 参差布局-优快云博客

本文链接：https://blog.youkuaiyun.com/u014507230/article/details/45310199

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

     <style type="text/css">
     .pagewrap{
          position: relative;
          width: 100%;
          padding: 0px;
          margin: 0px;
     }
     *{
          padding: 0px;
          margin: 0px;
     }
     #blue{
          background-color: blue;
     }

     .item, .promotions{
          width: 236px;
     }
     .righter{
          height: 670px;
          background-color: transparent;
     }
     .promotions{
          display: block;
     }
     .image{
          background-color:yellow;
          height: 400px;
          position: absolute;
     }
     .read{
          background-color: red;
          height: 200px;
          position: absolute;
          top: 436px;
     }
     .item{
          background-color: green;
          float: left;
          margin: 16px;
          position: relative;
          display: block;
     }
     .one{
          height: 300px;
     }
     .two{
          height: 900px;
     }
     .three{
          height: 400px;
     }
     .four{
          height: 500px;
     }
     .five{
          height: 400px;
     }
     .six{
          height: 300px;
     }
     .seven{
          height: 300px;
     }
     .eight{
          height: 500px;
     }
     .nine{
          height: 400px
     }
     .ten{
          height: 400px;
     }

     </style>
</head>

<body>
     <div class="pagewrap">
          <div class="one item"></div>
          <div class="two item"></div>
          <div class="three item"></div>
          <div class="four item"></div>
          <div class="righter item">
               <div class="image promotions"></div>
              <div class="read promotions"></div>
          </div>
          <div class="five item" id="blue"></div>
          <div class="six item"></div>
          <div class="seven item"></div>
          <div class="eight item"></div>
          <div class="nine item"></div>
          <div class="ten item"></div>
     </div>
</body>

</html>

总结：仅依靠float不能完全实现参差布局，float原理应该是将元素将会脱离当前文档流，移到容器的边缘或者移到前一个float元素的边缘（仅对行内元素有效）。如果空隙不够的话，元素会自行向下移动直到足够放下，同时默认会向左边对齐，直到左边遇到阻挡为止。因此，元素在第二行重排会受到第一行最高元素的限制，如果上一行元素最高位是X位，则此行会从X+1位开始排列。如果最高位是上一行最后列，则下一行会从第一列开始排列，但是在两行之间会产生大量空隙，无法形成紧密状态。