float浮动使得div可以在一行显示 

  <style>
    .div1{
        width: 100px;
        height: 100px;
        background-color: blue;
        float: left;/*第一个div漂浮起来了，第二个div顶替了第一个位置*/
    }
        .div2{
            width: 200px;
            height: 100px;
            background-color: red;
            float: left;
        }
    .div3{
        width: 100px;
        height: 200px;
        background-color: yellow;
        float: left;
    }
        .div4{
            width: 200px;
            height: 200px;
            background-color: green;
            float: left;/*4个一起飘就从左向右横排排着飘 ，使得4个div在同一行*/
        }
    </style>
</head>
<body>
<!--div.div*4 tab加回车快速输入4个div-->
<div class="div1"></div>
<div class="div2" style="clear: left"></div>/*style="clear: left"清除左边的浮动，相当于换行*/
<div class="div3" style="clear: right"></div>
<div class="div4" ></div>

</body>

 

posted @ 2018-06-12 13:54  未来的技术  阅读(1352)  评论(1)    收藏  举报