• 什么是浮动

    目录

    浮动：

                    可选值：

    注意：

     浮动的特点：

    简单总结：

    浮动：

                    通过浮动可以使一个元素向其父元素的左侧或右侧移动

                    使用float属性可以来设置于元素的活动

                    可选值：

                                    none默认值：

                                                                           元素不浮动

                                    left：

                                                                            元素向左浮动

                                    right

                                                                            元素向右浮动

    注意：

               元素设置浮动以后，水平布局的等式便不用在强制满足水平等式

               元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置

               所以元素下边的还在文档流中的元素会自动向上移动

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         .box{
    10.             width: 200px;
    11.             height: 200px;
    12.             background-color: aqua;
    13.             border: 20px red solid ;
    14.             float: right;
    15.         }
    16.     style>
    17. head>
    18. <body>
    19.     <div class="box">div>
    20. body> 
    21. html>

      

     元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置

                    所以元素下边的还在文档流中的元素会自动向上移动

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         .box1{
    10.             width: 200px;
    11.             height: 200px;
    12.             background-color: aqua;
    13.             border: 20px red solid ;
    14.             float: left;
    15.         }
    16.         .box2{
    17.             width: 300px;
    18.             height: 300px;
    19.             background-color: black;
    20.  
    21.         }
    22.     style>
    23. head>
    24. <body>
    25.     <div class="box1">div>
    26.     <div class="box2"> div>
    27. body> 
    28. html>

     都脱离文档流

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         .box1{
    10.             width: 200px;
    11.             height: 200px;
    12.             background-color: aqua;
    13.             border: 20px red solid ;
    14.             float: left;
    15.         }
    16.         .box2{
    17.             width: 300px;
    18.             height: 300px;
    19.             background-color: black;
    20.             float: left;
    21.             /*本来的box1还没有脱离文档流之前，它实际所占用的位置应该是整个水平宽度
    22.             ，它下面的box2应该排在它的下面，但是当box1脱离文档流之后，它所占的实际
    23.             位置将不再是整个水平的宽度，又由于它设置浮动以后，会完全脱离文档流，不再
    24.             占用文档流中的位置，设置浮动以后元素会向父元素的左侧或右侧移动，如果想要
    25.             让他们在一排的话，只要将另一个也脱离文档流即可
    26.             */
    27.  
    28.         }
    29.     style>
    30. head>
    31. <body>
    32.     <div class="box1">div>
    33.     <div class="box2"> div>
    34. body> 
    35. html>

     浮动的特点：

    1：浮动元素会完全脱离文档流，不再占据文档流中的位置

    2：设置浮动以后元素会向父元素的左侧或者右侧移动

    3：浮动元素默认不会从父元素中移除

    4：浮动元素向左或向右移动时，不会超过它前边的其他浮动元素

    5：如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移

    6：浮动元素不会超过它上边的浮动的兄弟元素，最多最多就是和它一样高

    简单总结：

                    浮动目前来讲它的主要作用就是让页面中的元素可以水平排列

                            通过浮动可以制作一些水平方向的布局（比如让三个div水平排列的话，只需要将它们三都设置为浮动即可）

  • 相关阅读:
    Unity 2D 游戏学习笔记（2）
    Node学习（一）-全局变量——global是node中最大的一个对象-可省略 & dirname-目录的绝对路径 & filename-文件的绝对路径
    2023年全球市场一次性外科引流系统总体规模、主要生产商、主要地区、产品和应用细分研究报告
    【Python爬虫+数据分析】采集电商平台数据信息采集|电商API数据采集接口接入
    IDERA ER/Studio Data Architect Professional v19.3.2
    工厂模式 —— mybatis
    RabbitMQ快速入门
    Mybatis 常见面试题
    WSL 运行make提示/lib/modules/xxx/build: No such file or directory. Stop.错误解决办法
    小程序版本审核未通过，需在开发者后台「版本管理—提交审核——小程序订单中心path」设置订单中心页path，请设置后再提交代码审核
  • 原文地址：https://blog.csdn.net/m0_65334415/article/details/127653888