• 设置float浮动

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

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

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

    注意：

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

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

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

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

    代码：

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="utf-8">
    5.         <title>标题title>
    6.         <style>
    7.             .box{
    8.                 width: 900px;
    9.                 height: 300px;
    10.                 background-color: rgb(0, 0, 255);
    11.             }
    12.             .box01{
    13.                 width: 300px;
    14.                 height: 300px;
    15.                 background-color: rgb(0, 255, 255);
    16.             }
    17.             .box02{
    18.                 width: 300px;
    19.                 height: 300px;
    20.                 background-color: rgb(0, 255, 55);
    21.             }
    22.             .box03{
    23.                 width: 300px;
    24.                 height: 300px;
    25.                 background-color: rgb(255, 0, 0);
    26.             }
    27.         style>
    28.     head>
    29.     <body>
    30.         <div class="box">
    31.             <div class="box01">box01div>
    32.             <div class="box02">box02div>
    33.             <div class="box03">box03div>
    34.         div>
    35.         
    36.     body>
    37. html>

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

    代码：

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="utf-8">
    5.         <title>标题title>
    6.         <style>
    7.             .box{
    8.                 width: 900px;
    9.                 height: 300px;
    10.                 background-color: rgb(0, 0, 255);
    11.             }
    12.             .box01{
    13.                 width: 300px;
    14.                 height: 300px;
    15.                 background-color: rgb(0, 255, 255);
    16.                 float: left;
    17.             }
    18.             .box02{
    19.                 width: 300px;
    20.                 height: 300px;
    21.                 background-color: rgb(0, 255, 55);
    22.                 float: left;
    23.             }
    24.             .box03{
    25.                 width: 300px;
    26.                 height: 300px;
    27.                 background-color: rgb(255, 0, 0);
    28.                 float: left;
    29.             }
    30.         style>
    31.     head>
    32.     <body>
    33.         <div class="box">
    34.             <div class="box01">box01div>
    35.             <div class="box02">box02div>
    36.             <div class="box03">box03div>
    37.         div>
    38.         
    39.     body>
    40. html>

     

  • 相关阅读:
    数据结构 【树状数组】【线段树】【珂朵莉树】
    k8s学习-CKA真题-Deployment扩缩容
    Go语言中的Gin框架的初步使用
    Go——二、变量和数据类型
    一米ip流量池系统
    微服务实战之领域事件
    Hadoop3 - MapReduce 并行机制
    Linux基本指令——其三
    L12.linux命令每日一练 -- 第二章 文件和目录操作命令 -- dirname和chattr命令
    vue的事件处理
  • 原文地址：https://blog.csdn.net/weixin_59155272/article/details/134450567