css浮动属性学习

最新推荐文章于 2024-06-18 20:30:59 发布

bcbobo21cn

最新推荐文章于 2024-06-18 20:30:59 发布

阅读量178

点赞数

分类专栏： web前端文章标签： css 前端浮动

本文链接：https://blog.csdn.net/bcbobo21cn/article/details/134701848

版权

web前端专栏收录该内容

150 篇文章 1 订阅

订阅专栏

在此文，

html菜单的基本制作-CSDN博客

已经看到css 浮动属性的效果；下面单独看一下浮动属性；

做4个div，设置不同的背景色，不为div添加float属性；效果如下；

因为div是块级元素，默认占据自己的行；

为每个div添加 float:left 属性后，效果如下；此属性使元素向左浮动，上一个块级元素如果没有占满一行，下一个块级元素会靠到上一个的左侧；

为每个div添加 float: right 属性，效果如下；下图是网页靠右侧的截图；

元素向右浮动了；

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />

    <style>
        #div1 {
            width:200px;
            height:100px;
            background-color:springgreen;
            float: right;
        }

        #div2 {
            width:200px;
            height:100px;
            background-color:red;
            float: right;
        }

        #div3 {
            width:200px;
            height:100px;
            background-color:blue;
            float: right;
        }

        #div4 {
            width:200px;
            height:100px;
            background-color:cyan;
            float: right;
        }

    </style>

</head>
<body>

    <div id="div1"> 
    </div>
    <div id="div2"> 
    </div>
    <div id="div3"> 
    </div>
    <div id="div4"> 
    </div>

</body>
</html>