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

    浮动是不是css3新增的

    长期闲置长期闲置2022-04-11 17:49:10原创88

    浮动不是css3新增的。利用float属性可以定义元素在哪个方向浮动,该属性在css1时就已经可以使用了;无论设置浮动的元素本身是什么元素,设置浮动后,元素会生成一个块级框,语法为“元素{float:value;}”。

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

    浮动是不是css3新增的

    float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。

    如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。

    注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。

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

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

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

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

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

    示例如下:

    <!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>

    输出结果:

    10.png

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

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

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css3
    上一篇:es6箭头函数有哪些特性 下一篇:css3中的3维平面z轴有负值吗
    Web大前端开发直播班

    相关文章推荐

    • css3只能实现一次动画吗• css3有判断语句吗• css3怎么去掉input点击的框• css3怎么实现动画结束不消失效果• CSS3中的渐变分为哪几类

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网