CSS之浮动属性简单应用

最新推荐文章于 2024-11-01 12:26:05 发布

汪叽家的兔子羡

最新推荐文章于 2024-11-01 12:26:05 发布

阅读量180

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/LuoYi_ly_/article/details/109273739

版权

float浮动属性

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

属性值	作用（描述）
left	元素向左浮动
right	元素向右浮动
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	元素继承父元素的float属性

在平时我们正常编写两个div，这两个会上下排列：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> 
        div{
            width: 150px;
            height: 100px;
        }
        .box1{
            background: yellow;
        }
        .box2{
        	width: 160px;
            background: yellowgreen;
        }
    </style>
</head>
<body>    
    <div class="box1"></div>
    <div class="box2"></div>    
</body>
</html>

在这里插入图片描述

如果要实现这两个div并排，我们就需要使用到浮动属性。
若将box1左浮动，那么box2就会到box1后面，会被box1盖住

		.box1{
            background: yellow;
            float: left;
        }
        .box2{
            width: 160px;
            background: yellowgreen;
        }

在这里插入图片描述
如果想要将box2并排在box1旁边，则需要：

		.box1{
            background: yellow;
            float: left;
        }
        .box2{
            width: 160px;
            background: yellowgreen;
            float: left;
        }

在这里插入图片描述
如果是box1左浮动，box2有浮动则会出现，在浏览器中黄色的在左边，绿色的在右边：

		.box1{
            background: yellow;
            float: left;
        }
        .box2{
            width: 160px;
            background: yellowgreen;
            float: right ;
        }