浮动属性以及操作

我是打工人

已于 2022-06-04 21:03:58 修改

阅读量367

点赞数

文章标签： css html

于 2022-03-09 08:35:04 首次发布

本文链接：https://blog.csdn.net/szydqq/article/details/123312960

版权

本文详细介绍了CSS中的浮动属性(float)，包括left和right值的使用，以及如何影响元素在页面布局中的位置。内容涵盖了浮动元素如何脱离文档流，何时停止浮动，以及如何通过清除浮动避免布局混乱。示例代码展示了浮动元素的排列和排异效果，帮助读者深入理解浮动在实际网页设计中的应用。

摘要由CSDN通过智能技术生成

浮动属性的使用:控制元素在浏览器中的位置

属性:float ===>使元素漂浮/使元素浮动

属性值:left right none(默认值表示不浮动)

- 浮动属性只能控制元素在水平方向上移动

- 浮动属性会使当前的元素脱离文档流(网页布局) 初始位置不存在后面的元素就会补上初始的网页布局就会被破坏

浮动属性的停止条件

设置浮动属性的元素不会跑出当前的父级盒子碰到父级元素的边框就会停止浮动

碰到前面一个含有浮动属性的元素也会停止浮动

当子级元素的宽度大于父级元素的宽度时候最后一个浮动元素会慢慢的往下移动直至找到足够的空间

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: green;
            float: left;/* 元素设置向左浮动目前是没有效果的 */
            /* float: right; */
        }
        .box2{
            width: 200px;
            height: 50px;
            background-color: blue;
            float: left;
        }
        .box3{
            width: 450px;
            height: 100px;
            background-color: yellowgreen;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
</html>

效果图：

浮动释义

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    p {
      width: 100px;
      height: 100px;
      background-color: pink;

      /* float: left; */
      float: right;
    }

    div {
      width: 300px;
      height: 300px;
      background-color: skyblue;
    }

    img {
      width: 200px;
      height: 200px;
    }

    div {
      /* clear: right;
      clear: left; */
      clear: both;
    }
  </style>
</head>
<body>

  <div></div>
  <p></p>
  <!-- <div>我是一个 div 标签, 你好世界  hello world  你好世界 hello world 你好 世界</div> -->
  <div></div>

</body>
</html>

清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;   
      padding: 0;
    }

    ul, li {
      list-style: none;
    }

    li {
      width: 100px;
      height: 30px;
      background-color: skyblue;
      float: left;
    }

    div {
      width: 200px;
      height: 300px;
      background-color: pink;
    }

    /* ul > p {
      clear: both;
    } */

    /* 给 ul 添加一个 ::after 伪元素 */
    /* 也刚好排列在最后一个, 不一定是块元素, 我可以转成块元素 */
    /* ul::after {
      content: '';
      display: block;
      clear: both;
    }

    ol::after {
      content: '';
      display: block;
      clear: both;
    } */

    /* 单独书写一个用于清除浮动的类名 */
    .clearfix::after {
      content: '';
      display: block;
      clear: both;
      position: sticky;
    }
  </style>
</head>
<body>

  <ul class="clearfix">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <!-- <p></p> -->
  </ul>
  <ol class="clearfix">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <!-- <p></p> -->
  </ol>
  <div></div>

</body>
</html>

浮动排异

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 100px;
      height: 200px;
      background-color: pink;
      float: left;
    }

    .right {
      float: right;
    }

    p {
      /* width: 300px; */
      height: 500px;
      background-color: skyblue;
      overflow: hidden; /*超出部分隐藏*/
      /* padding: 0 100px;
      background-clip: content-box; */
    }
  </style>
</head>
<body>
  <div></div>
  <div class="right"></div>
  <p></p>
</body>
</html>

效果图：