css布局的漂浮

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

/home/liupc

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

阅读量1.4k

点赞数 1

分类专栏： 6 Java学习笔记

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/pengchengliu/article/details/88103469

版权

6 Java学习笔记专栏收录该内容

109 篇文章 7 订阅

订阅专栏

css布局的漂浮（不怎么用，了解一下，也写不到）

用到float属性：有两个属性值：

none：默认值。对象不漂浮。

left : 文本流向对象的右边。

right : 文本流向对象的左边。

例1：

//漂浮.html

<html>

<head>

<title>漂浮</title>

<style type="text/css">

div{

width: 200px;

height:100px;

border: 2px solid blue;

}

#div1{

float:left; //第一个漂浮到左边。效果就是：第一个

}

</style>

</head>

<body>

<div id="div1">AAAAAAAAAAAAA</div>

<div id="div2">BBBBBBBBBBBBBB</div>

<div id="div3">CCCCCCCCCCCCCC</div>

</body>

</html>

效果：

解释：

div标签的特点是自动换行。

正常情况下，div1,div2,div3是依次从上往下排列。这就是一个文本流。

当给第一个div设置成left之后，会把它自己的内容居左，它后面的内容居右。即把div2放到div1的右面。

div2走了之后，空出来的位置，div3补上。

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
css布局的漂浮

css布局的漂浮（不怎么用，了解一下，也写不到）用到float属性：有两个属性值： none：默认值。对象不漂浮。 left : 文本流向对象的右边。 right : 文本流向对象的左边。例1：...
复制链接

扫一扫

专栏目录

评论 2

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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