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

    css浮动有哪些特性

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

    说明

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

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

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

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

    3、浮动元素之间的外边距不会折叠。

    浮动元素不会重叠。定位元素不同,可能会重叠。

    实例

    <!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学习网