设置float浮动

用途：用来实现并行。常用在div等块元素并行显示。

设置右浮动代码：float: right;

设置左浮动代码：float: left;

注意：

1.要浮动，所有盒子都要设置浮动。

2.行内元素如span，添加了float属性过后宽度和高度就有效了。（默认行内元素对宽度和高度不生效）

3.父盒子要足够宽，如果父盒子宽度不够了，则子会盒子掉下来，跑去前一个盒子的空间里。

如下图（没有设置浮动）：

代码：


html>
<html>
    <head>
        <meta charset="utf-8">
        <title>标题title>
        <style>
            .box{
                width: 900px;
                height: 300px;
                background-color: rgb(0, 0, 255);
            }
            .box01{
                width: 300px;
                height: 300px;
                background-color: rgb(0, 255, 255);
            }
            .box02{
                width: 300px;
                height: 300px;
                background-color: rgb(0, 255, 55);
            }
            .box03{
                width: 300px;
                height: 300px;
                background-color: rgb(255, 0, 0);
            }
        style>
    head>
    <body>
        <div class="box">
            <div class="box01">box01div>
            <div class="box02">box02div>
            <div class="box03">box03div>
        div>
        
    body>
html>

如下图（设置了左浮动）：

代码：


html>
<html>
    <head>
        <meta charset="utf-8">
        <title>标题title>
        <style>
            .box{
                width: 900px;
                height: 300px;
                background-color: rgb(0, 0, 255);
            }
            .box01{
                width: 300px;
                height: 300px;
                background-color: rgb(0, 255, 255);
                float: left;
            }
            .box02{
                width: 300px;
                height: 300px;
                background-color: rgb(0, 255, 55);
                float: left;
            }
            .box03{
                width: 300px;
                height: 300px;
                background-color: rgb(255, 0, 0);
                float: left;
            }
        style>
    head>
    <body>
        <div class="box">
            <div class="box01">box01div>
            <div class="box02">box02div>
            <div class="box03">box03div>
        div>
        
    body>
html>

相关阅读:
香蕉派BPI-M6 采用深蕾半导体Vs680芯片设计，板载4G LPDDR4和16G eMMC存储
文件列表创建工具 Nifty File Lists mac中文版功能特色
Android源码下载
Oracle基础入门
香橙派Zero3安装miniconda3（问题多多，已全部解决）
米尔MYD-JX8MPQ yocto
Codeforces Round #779 (Div. 2)
关于ASP.NET Core WebSocket实现集群的思考
Kotlin & Compose Multiplatform 跨平台开发实践之加入 iOS 支持
互联网摸鱼日报（2022-11-03）

原文地址：https://blog.csdn.net/weixin_59155272/article/details/134450567