CSS之浮动属性简单应用

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 ;
        }

在这里插入图片描述
注意:
  float属性是脱离半层文档流的,也就是当使用浮动属性之后,这个盒子就不会在浏览器中占位置

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值