• 技术文章 >Web开发 >css教程

    css浮动元素的规则介绍

    小妮浅浅小妮浅浅2021-08-23 20:24:55原创4774

    说明

    1、当浮动元素浮动时,其margin不会超过包含块的padding。

    如果想要超过元素,可以设置margin属性。

    如果两个元素一个向左浮动,另一个向右浮动,左浮动元素的marginRight不会与右浮动元素的marginLeft相邻。

    2、若有多个浮动元素,浮动元素将按顺序排列而不重叠。

    后面的元素高度不会超过前面的元素,也不会超过包含块。

    3、如果非浮动元素和浮动元素同时存在,非浮动元素在前面。

    浮动元素不会高于非浮动元素。浮动元素会尽可能对齐顶部、左右。

    实例

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    <!DOCTYPE html>

    <html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            * {

                margin: 0;

                padding: 0;

            }

            .one {

                width: 100px;

                height: 100px;

                background: red;

            }

            .two {

                width: 100px;

                height: 100px;

                background: green;

                float: left;

            }

            .three {

                width: 150px;

                height: 150px;

                background: blue;

            }

        </style>

    </head>

    <body>

    <div></div>

    <div></div>

    <div></div>

    </body>

    </html>

    以上就是css浮动元素的规则介绍,希望对大家有所帮助更多css学习指路:css教程

    本文教程操作环境:windows7系统、css3版,DELL G3电脑。

    专题推荐:css浮动元素
    上一篇:css浮动有哪些特性 下一篇:css浮动元素的重叠问题

    相关文章推荐

    • css中浮动如何理解• css中流的概念介绍• css文档流的两种特性• css使用transform垂直对齐• css中position常见的四个属性值• css中sticky属性是什么• css中sticky属性有什么特点• css浮动有哪些特性

    全部评论我要评论

    © 2021 Python学习网 苏ICP备2021003149号-1

  • 取消发布评论
  • 

    Python学习网