• CSS中的浮动float(元素怎样浮动以及浮动元素的特点--脱标)

    元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

    一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

    浮动元素之后的元素将围绕它。

    浮动元素之前的元素将不会受到影响。

    浮动

    1. <style>
    2.         *{
    3.             margin: 0;
    4.             padding: 0;
    5.         }
    6.         .parent{
    7.             width: 800px;
    8.             height: auto;
    9.             margin: 20px auto 0;
    10.             outline: 1px dashed red;
    11.             overflow: hidden;
    12.         }
    13.         .son1{
    14.             width: 200px;
    15.             height: 300px;
    16.             background-color: green;
    17.                /* 浮动 */
    18.             float: left;
    19.         }
    20.         .son2{
    21.             width: 150px;
    22.             height: 200px;
    23.             background-color: skyblue;
    24.                /* 浮动 */
    25.             float: left;
    26.         }
    27.         .son3{
    28.             width: 300px;
    29.             height: 500px;
    30.             background-color: pink;
    31.                /* 浮动 */
    32.             float: left;
    33.         }
    34.     </style>
    35. </head>
    36. <body>
    37.     <div class="parent">
    38.         <div class="son1"></div>
    39.         <div class="son2"></div>
    40.         <div class="son3"></div>
    41.     </div>
    42. </body>

    效果预览图

    浮动的性质：脱标、贴边、字围、收缩

    （1）浮动的元素脱标

    浮动元素，脱离标准文档流（它当前就不在标准文档流里面了）。它在标准文档流中位置就被腾了出来。于是在标准文档流中的.box2就跑了上去。

    （2）浮动的元素互相贴靠，并排存在

    浮动元素与浮动元素之间，是并排存在的。

    1.     <style>
    2.         /* 浮动元素的特点 */
    3.         *{
    4.             margin: 0;
    5.             padding: 0;
    6.         }
    7.         /* 浮动元素与浮动元素之间，并排存在，紧挨着彼此 */
    8.         .box1{
    9.             width: 200px;
    10.             height: 200px;
    11.             background-color: aqua;
    12.             /* 浮动 (脱标)*/
    13.             float: left;
    14.         }
    15.         .box2{
    16.             width: 300px;
    17.             height: 300px;
    18.             background-color: blueviolet;
    19.             /* 浮动(脱标) */
    20.             float: left;
    21.         }
    22.         .box3{
    23.             width: 500px;
    24.             height: 500px;
    25.             background-color: green;
    26.         }
    27. </head>
    28. <body>
    29.     <div class="box1">box1</div>
    30.     <div class="box2">box2</div>
    31.     <div class="box3">box3</div>
    32. </body>

    效果预览图

     

    特别注意：

    a. 空间充足的情况下，浮动元素之间是互相贴靠，并排存在的。

    b. 空间不足的情况下，

    1）如果没有足够的空间，同时 第2个元素高度比第一个元素小，那么第3元素会贴在第1个元素的后面显示。

    2）如果没有足够的空间，同时 第2个元素高度比第一个元素大，那么第3元素会贴左墙显示。

    3）标准文档流中的行元素，设置浮动之后，当前这个元素就可以设置宽度和高度了。（脱标的元素，是没有行、块、行内块这种方法）。

  • 相关阅读:
    面试--线程池的执行流程和拒绝策略有哪些？
    conntrack最大数量
    Rainbond的 Gateway API 插件制作实践
    基于图数据库的元数据血缘关系分析技术研究与实践
    批量剪辑技巧：视频去色处理，让色彩焕然一新！
    React中路由操作、页面跳转
    【QT】 Qt自定义ui控件
    Spring学习（三）：MVC
    数组和List相互转化（摒弃循环）
    CRM客户管理系统能在线使用吗？
  • 原文地址：https://blog.csdn.net/m0_71814235/article/details/125633626