zoukankan      html  css  js  c++  java
  • CSS学习笔记(1)--浮动

    总结:浮动只能在脱离文档流的当前位置向上浮动,不能像定位一样到处乱跑。

    清除浮动,设置一个类.clear{clear:both;}

    1.没有浮动,都独占一行:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Document</title>
     6     <style>
     7         #div1{
     8             width:50px;
     9             height: 50px;
    10             background: #f00;
    11             /*float: left;*/
    12         }
    13         #div2{
    14             width: 70px;
    15             height: 70px;
    16             background: #00f;
    17             /*float: left;*/
    18         }
    19         #div3{
    20             width: 100px;
    21             height: 100px;
    22             background: #0f0;
    23             /*float: left;*/
    24         }
    25     </style>
    26 </head>
    27 <body>
    28     <div id="div1"></div>
    29     <div id="div2"></div>
    30     <div id="div3"></div>
    31 </body>
    32 </html>

    2.红色浮动,后两个顶上来:

     1 <style>
     2         #div1{
     3             width:50px;
     4             height: 50px;
     5             background: #f00;
     6             float: left;
     7         }
     8         #div2{
     9             width: 70px;
    10             height: 70px;
    11             background: #00f;
    12             /*float: left;*/
    13         }
    14         #div3{
    15             width: 100px;
    16             height: 100px;
    17             background: #0f0;
    18             /*float: left;*/
    19         }
    20     </style>

    3.红色、蓝色浮动,绿色顶上来,红蓝在上面一层先后排列:

     1 <style>
     2         #div1{
     3             width:50px;
     4             height: 50px;
     5             background: #f00;
     6             float: left;
     7         }
     8         #div2{
     9             width: 70px;
    10             height: 70px;
    11             background: #00f;
    12             float: left;
    13         }
    14         #div3{
    15             width: 100px;
    16             height: 100px;
    17             background: #0f0;
    18             /*float: left;*/
    19         }
    20     </style>

    4.全部浮动,都在上面一层,先后排列:

     1     <style>
     2         #div1{
     3             width:50px;
     4             height: 50px;
     5             background: #f00;
     6             float: left;
     7         }
     8         #div2{
     9             width: 70px;
    10             height: 70px;
    11             background: #00f;
    12             float: left;
    13         }
    14         #div3{
    15             width: 100px;
    16             height: 100px;
    17             background: #0f0;
    18             float: left;
    19         }
    20     </style>

    5.只蓝色浮动,上面是红色独占一行,绿色的顶到蓝色原来的位置,蓝色到上一层:

     1     <style>
     2         #div1{
     3             width:50px;
     4             height: 50px;
     5             background: #f00;
     6             /*float: left;*/
     7         }
     8         #div2{
     9             width: 70px;
    10             height: 70px;
    11             background: #00f;
    12             float: left;
    13         }
    14         #div3{
    15             width: 100px;
    16             height: 100px;
    17             background: #0f0;
    18             /*float: left;*/
    19         }
    20     </style>

    6.蓝色和绿色浮动,都在第二列先后排布:

     1     <style>
     2         #div1{
     3             width:50px;
     4             height: 50px;
     5             background: #f00;
     6             /*float: left;*/
     7         }
     8         #div2{
     9             width: 70px;
    10             height: 70px;
    11             background: #00f;
    12             float: left;
    13         }
    14         #div3{
    15             width: 100px;
    16             height: 100px;
    17             background: #0f0;
    18             float: left;
    19         }
    20     </style>

     7.红蓝绿都浮动,绿色加一个“清除左侧”,意思是,不允许左侧有东西,就跑去下一行了(清除两侧效果一样,因为包含了左侧):

     1     <style>
     2         #div1{
     3             width:50px;
     4             height: 50px;
     5             background: #f00;
     6             float: left;
     7         }
     8         #div2{
     9             width: 70px;
    10             height: 70px;
    11             background: #00f;
    12             float: left;
    13         }
    14         #div3{
    15             width: 100px;
    16             height: 100px;
    17             background: #0f0;
    18             float: left;
    19             clear: left;
    20         }
    21     </style>
  • 相关阅读:
    SpringCloud五大组件
    js获取系统信息
    java深入
    java实现群头像合成
    .net读取上传apk文件的包名、软件名称、logo解决方法
    SignalR 跨域设置
    Html5 Video 实现方案
    JS 日期工具类-基于yDate
    图片下载本地缓存时间戳显示图片方法
    一个Notification 进度条插件(android,NJS实现,直接就可使用)
  • 原文地址:https://www.cnblogs.com/Jacklovely/p/6222813.html
Copyright © 2011-2022 走看看