浮动和定位

一 浮动

1.1定义float

float 属性定义元素向哪个⽅向浮动，在 CSS 中，任何元素都可以浮动。浮动元素会⽣成⼀个块级框，⽽不论它本身是何种元素

取值：

none 默认值，不浮动

left 左浮动

right 右浮动

  div{
    width: 100px;
    height: 100px;
    float: left;
  }
  .one{
    background-color: red;
  }
  .two{
    background-color: green;
  }
  .thr{
    background-color: blue;
  }

正常情况下div是块级元素，应该独占一行，但是通过浮动之后就可以在一行显示，可以理解为通过浮动之后就变成了行内块既可以设置宽高也能在一行显示

  div{
    width: 100px;
    height: 100px;
  }
  .one{
    background-color: red;
    float: left;
  }
  .two{
    background-color: green;
    float: right;                  这里通过让.two来向右浮动让.one靠左.two靠右
  }
  .thr{
    background-color: blue;
    float: left;
  }

one
    
two
    
three

1.2 特性

浮动元素会去找离它最近的有浮动的元素进⾏贴边

假如在⼀⾏之上只有极少的空间可供浮动元素，那么这个元素会跳⾄下⼀⾏

右浮动会颠倒盒⼦顺序

⾏内元素设置了浮动后，默认已转为块级元素，可以直接设置宽⾼，⽆需转换

块级元素，如果没有设置宽⾼，浮动后， 会收缩到内容的⼤⼩

浮动元素会脱离⽂档流，会压住下⼀个块元素，但不会压住其内容

    /* 特性1 特性2 */
    .box{
        width:500px;
    }
    .box-item{
        float:left;
        width:200px;
        height:200px;
        border:2px solid red;
    }
    /* 特性3 */
    .box-item{
        float:right;
        width:200px;
        height:200px;
        border:2px solid red;
    }
    /*特性4 */
    .box-span{
        float:right;
        width:200px;
        height:200px;
        border:2px solid red;
    }
    /*特性5 */
    .box-div{
        float:left;
    }


    
1
    
2
    
3
    
4
    5

    
6

文章来源于互联网:浮动和定位

相关推荐: 新手向:基于Python的快捷启动器（本地应用/文件秒开工具）

高效本地快捷启动器：现代数字工作流的效率引擎 引言：数字化时代的效率挑战与解决方案 在信息爆炸的数字时代，计算机用户每天需要处理数十个甚至上百个应用程序、文档和网页资源。传统通过开始菜单或文件资源管理器逐层查找的方式，已无法满足现代工作流对效率的极致追求。高效…