浮动

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>浮动</title>
  <style type="text/css">
   .redDiv,.blueDiv,.greenDiv{
    width: 300px;
    height: 300px;
    /*
      1、使用float可以让块级元素同行显示
      2、float left让元素从左往右排列，right让元素从右往左排列
      3、使用float 可以让行级元素设置宽和高
      4、float的元素，从左往右排，空间不够就会换行
      5、float left的时候，如果布局需要换行，换行的元素的位置和最后一个div的高度是一样的
     */
    float: right;
   }
   .redDiv{
    background-color: red;
    height: 350px;
   }
   .blueDiv{
    background-color: blue;
    height: 250px;
   }
   .greenDiv{
    background-color: green;
    height: 550px;
   }
   .span1,.span2{
    float: right;
    width: 100px;
    height: 100px;
    background-color: aquamarine;
   }
   .span2{
    background-color: #8A2BE2;
   }
  </style>
 </head>
 <body>
  <div class="redDiv">div1</div>
  <div class="blueDiv">div2</div>
  <div class="greenDiv">div3</div>
  <span class="span1">span1</span>
  <span class="span2">span2</span>
 </body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容