float 浮动

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

如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列

浮动的元素是互相贴靠在一起的(不会有缝隙), 如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性

如果行内元素有了浮动，则不需要转换块级/行内块元素就可以直接给高度和宽度了

如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定

浮动的盒子中间是没有缝隙的，是紧挨一起的

为了约束浮动元素位置，我们网页布局一般采取的策略是：

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则


    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 1226px;
            height: 285px;
            background-color: pink;
        }
        li {
            list-style: none;
        }
        .box li {
            width: 296px;
            height: 285px;
            background-color: purple;
            margin-right: 14px;
            float: left;
        }
        .box .last {
            margin-right: 0px;
        }
    style>
head>
<body>
    <ul class="box">
        <li>1li>
        <li>2li>
        <li>3li>
        <li class="last">4li>
    ul>
body>

1. 浮动和标准流的父盒子搭配

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

2. 一个元素浮动了，理论上其余的兄弟元素也要浮动

一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动， 以防止引起问题

浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

相关阅读:
【Linux】C语言实现对文件的加密算法
K8S：pod集群调度及相关操作
G1D26-DP presentation&NLP相关
Flink connector Oracle CDC 实时同步数据到MySQL（Oracle19c）
Java：垃圾收集 CPU 统计信息
逆向USB设备共享：利用内网穿透让远程设备访问本地USB设备
这些好用的设计网站，你一定要收藏
Cookie的作用域不区分协议和端口
springboot图书借阅管理系统 java读书心得借书卡管理系统
深度神经网络的训练过程,深度神经网络如何训练

原文地址：https://blog.csdn.net/MOUNTAIN_SEA1/article/details/126245541