CSS：什么是浮动（float）

最新推荐文章于 2024-08-03 23:03:36 发布

听海边涛声

最新推荐文章于 2024-08-03 23:03:36 发布

阅读量109

点赞数 4

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/panghuangang/article/details/140303984

版权

说明

float 属性用于创建浮动框，将其移到一边，直到左边缘或右边缘触及包含块或另外一个浮动框的边缘。

语法：

选择器 {float: 属性值;}

属性可能的取值：

none：元素不浮动（默认值）
left：元素向左浮动
right：元素向右浮动

示例

示例：两个盒子都是左浮动

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .left,
    .right {
      float: left;
      width: 200px;
      height: 200px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class="left">左边盒子</div>
  <div class="right">右边盒子</div>
</body>

</html>

在这里插入图片描述

示例：一个左浮动，一个右浮动

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .left,
    .right {
      float: left;
      width: 200px;
      height: 200px;
      background-color: pink;
    }

    .right {
      float: right;
    }
  </style>
</head>

<body>
  <div class="left">左边盒子</div>
  <div class="right">右边盒子</div>
</body>

</html>