当前位置：网站首页>float属性的使用

float属性的使用

2022-08-09 15:04:00 【恁180】

float: ; 设置元素的浮动

可选值：

none 默认值，元素正常显示，不浮动

left 元素向左浮动

right 元素向右浮动

float可以使块级元素水平布局

例如左浮动

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      #outer {
        width: 500px;
        height: 600px;
        background-color: #ccc;
        margin: 50px auto;
      }
      .box{
        float: left;
        width: 100px;
        height: 100px;
        background-color: red;

      }
     
      .box2{
        background-color: green;

      }
      .box3{
        background-color: indigo;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div class="box1 box"></div>
      <div class="box2 box"></div>
      <div class="box3 box"></div>
    </div>
  </body>
</html>

效果如图所示;

例如右浮动

在float属性后面改成right即可

效果如图所示：

浮动的特点

1:浮动元素会脱离文档流，元素脱离文档流以后，不会再占用文档流的位置，它下边的元素会立即向上移动

例如：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      #outer {
        width: 500px;
        height: 600px;
        background-color: #ccc;
        margin: 50px auto;
      }
      .box{
        width: 100px;
        height: 100px;
        background-color: red;

      }
      .box1{
        float: left;
      }
      .box2{
        width: 15px;
        height: 150px;
        background-color: green;
      }
      .box3{
        background-color: indigo;
        /* float: left; */
      }
    </style>
 
  </head>
  <body>
    <div id="outer">
      <div class="box1 box"></div>
      <div class="box2 box"></div>
      <div class="box3 box"></div>
    </div>
  </body>
</html>

如图所示：