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

    css浮动有哪些特性

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

    说明

    1、浮动元素会从普通文档流中分离出来。

    但浮动元素不仅会影响自己,还会影响周围元素的对齐。

    2、无论是行内元素还是块级元素,如果设置了浮动,浮动元素就会产生块级框。

    可以设置width和height,所以float通常用来制作横向配列的菜单,可以设置大小和横向排列。

    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

    35

    36

    37

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>浮动之特</title>

    <style>

    *{

    padding: 0;

    margin: 0;

    }

    .one,

    .two {

    width:200px;

    height:200px;

    background-color: pink;

    }

    .one{

    float:left;

    }

    .two{

    background-color: purple;

    float:left;

    }

    .three{

    float:left;

    width:200px;

    height:200px;

    background-color: blue;

    }

    </style>

    </head>

    <body>

    <div></div>

    <div></div>

    <div></div>

    </body>

    </html>

    以上就是css浮动的特性,希望对大家有所帮助。更多css学习指路:css教程

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

    专题推荐:css浮动
    上一篇:css中sticky属性有什么特点 下一篇:css浮动元素的规则介绍

    相关文章推荐

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

    全部评论我要评论

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

  • 取消发布评论
  • 

    Python学习网