浮动的用法

最新推荐文章于 2022-10-19 16:42:03 发布

小幻奏

最新推荐文章于 2022-10-19 16:42:03 发布

阅读量495

点赞数 2

分类专栏： HTML

本文链接：https://blog.csdn.net/weixin_44489400/article/details/87884262

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在我们html的布局中常常会用到float（浮动）在页面布局时，一般用float属性来实现多栏布局，导航菜单等等，往往是用于图像和文字。元素的水平方向浮动意味着元素只能左右移动而不能上下移动。如果你把几个浮动的元素放到一起，有空间的话，它们将彼此相邻。
常用的浮动是左浮动(left)和右浮动(right)。
下面是没加浮动的布局：
在这里插入图片描述
下面是加了左浮动的：

代码：

<style type="text/css">
div {
	width:300px;
	height:200px;
}
.divone{
	float:left;
	background:#900;
}
.divtwo{
	float:left;
	background:#BD19D3;
}
.divthree{
	float:left;
	background:#6D7DDC;
}
</style>
</head>

<body>
    <div class="divone"></div>
    <div class="divtwo"></div>
    <div class="divthree"></div>
    
</body>

如果想要浮动元素紧跟的元素停留在原始的位置，不跟着浮动，就对该元素设置clear的属性值。
clear（清除浮动）的三个属性值：left（清除左侧浮动）,right,both
灵活的运用浮动，把我们的布局变得更美！

小幻奏

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
浮动的用法

在我们html的布局中常常会用到float（浮动）在页面布局时，一般用float属性来实现多栏布局，导航菜单等等，往往是用于图像和文字。元素的水平方向浮动意味着元素只能左右移动而不能上下移动。如果你把几个浮动的元素放到一起，有空间的话，它们将彼此相邻。常用的浮动是左浮动(left)和右浮动(right)。下面是没加浮动的布局：下面是加了左浮动的：代码：&lt;style type="...
复制链接

扫一扫