随笔 - 124, 文章 - 2, 评论 - 4, 阅读 - 92868

css浮动

浮动样式float:

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

默认值为：none；

可能的值为：

left：元素向左浮动；

right:元素向右浮动；

inherit：规定应该从父元素继承 float 属性的值。

用法：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css浮动</title>
        <style>
            .left{
                height: 300px;
                width: 300px;
                background: wheat;
                display: inline-block;/*首先这两个div都是块级元素先转换为行内元素*/
               float: left;/*给左边的div加上float:left; div会往左浮动*/
            }
            .right{
                height: 300px;
                width: 300px;
                background:aquamarine;
               display: inline-block;/*首先这两个div都是块级元素先转换为行内元素*/
              float:right;/*给左边的div加上float:right; div会往右浮动*/
            }
        </style>
    </head>
    <body>
        <div class="left">我是左浮动</div>
        <div class="right">我是右浮动</div>
    </body>
</html>

posted on 2018-11-05 11:45 独孤求败-独孤九剑阅读(140) 评论(1) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

2025年3月

日

一

二

三

四

五

六

昵称：独孤求败-独孤九剑
园龄： 6年4个月
粉丝： 6
关注： 7

搜索

常用链接

我的标签

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论