• 技术文章 >web前端 >css教程

    css的float属性怎么用?css浮动属性float的详解

    不言不言2018-10-30 13:32:03原创3058
    css中float属性在网页开发中是经常需要用到的,但是css中float属性到底怎么用呢?很多朋友可能对此比较迷糊,本篇文章就来给大家详解一下css中float属性的用法。

    首先我们来简单看一下css中float属性

    float属性,顾名思义就是浮动属性,设置了float属性的元素会根据属性值向左或向右浮动,我们称设置了float属性的元素为浮动元素。

    用上面的话说来,感觉其实是比较抽象的,下面我们就来从css的float属性的用法来进一步了解float属性。

    我们先来看一个float属性的应用例子

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title></title>
    <style>
    img 
    {
        float:right;/*向右*/
        /*float: left;向左*/
    }
    </style>
    </head>
    <body>
    <p>
        <img src="image/timg.jpg" width="95" height="84" />
    好看的花好看的花好看的花好看的花好看的花好看的花好看的花好看的花好看的花
    好看的花好看的花好看的花好看的花好看的花好看的花好看的花好看的花
    好看的花好看的花好看的花好看的花好看的花好看的花好看的花好看的花
    </p>
    </body>
    </html>

    上述代码中我们给了图片一个float:right属性,导致了图片将会浮动在段落的右边,效果如下:

    2345截图20181030103516.png

    这就是float属性所实现的功能,但是float属性在实际应用的过程中影响的不仅是自己,它也会影响周围的元素对其进行环绕,所以这个
    时候就需要来清除浮动带来的影响。

    关于css如何清除浮动大家可以参考一下这两篇文章来解决这个问题,里面内容很详细,这里就不多说了。

    css清除浮动的方法有哪些?css浮动清除的四种方法介绍

    css浮动是什么意思?css浮动的原理以及css清除浮动的方法(附代码)

    以上就是css的float属性怎么用?css浮动属性float的详解的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:float属性
    上一篇:使用CSS3线性渐变实现图片闪光划过效果(代码实例) 下一篇:css中如何设置float浮动居中?
    Web大前端开发直播班

    相关文章推荐

    • 深入理解和应用Float属性• css中Float属性• CSS使用float属性设置浮动元素的方法介绍• html5中float属性造成的换行如何处理• css中Float属性详解• 当float属性导致换行后,应该怎么处理?
    1/1

    PHP中文网