• 技术文章 >web前端 >前端问答

    浮动是css3的新特性吗

    长期闲置长期闲置2022-06-23 15:37:51原创150

    浮动不是css3的新特性。定义元素在哪个方向浮动的float属性在css1时就已经可以使用了,css的浮动会使元素向左或向右移动,其周围的元素也会重新排列,一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

    本教程操作环境:windows10系统、CSS3&&HTML5版本、Dell G3电脑。

    css浮动

    浮动不是css3的新特性

    CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。

    Float(浮动),往往是用于图像,但它在布局时一样非常有用。

    元素怎样浮动

    元素的水平方向浮动,意味着元素只能左右移动而不能上下移动。

    一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

    浮动元素之后的元素将围绕它。

    浮动元素之前的元素将不会受到影响。

    如果图像是右浮动,下面的文本流将环绕在它左边:

    示例如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>123</title>
    <style>
    img 
    {
    float:right;
    }
    </style>
    </head>
    <body>
    <p>在下面的段落中,我们添加了一个 <b>float:right</b> 的图片。导致图片将会浮动在段落的右边。</p>
    <p>
    <img src="logocss.gif" width="95" height="84" />
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    </p>
    </body>
    </html>

    输出结果:

    06.png

    (学习视频分享:css视频教程html视频教程

    以上就是浮动是css3的新特性吗的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css
    上一篇:html5草案是哪一年发布的 下一篇:translate是css3属性吗
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• css3动画怎么设置旋转参考点• %是css3的单位吗• css3可以做3d的效果吗• css3中什么是用来设置文本高度的• 粘性定位是css3新增的吗
    1/1

    PHP中文网