当前位置：网站首页 > 技术文章 > 正文

六个角度剖析css中的浮动定位（css中浮动的定义）

zhezhongyun 2025-05-02 14:48 35 浏览

首先给浮动一个定义:浮动就是程序中定位的一种

那么什么又是定位:元素框相对于其正常位置应该出现的位置在哪儿

浮动定位：解决了多个块级元素能在一行内显示。

什么是浮动定位。可以用如下几个特点定义。

特点一：将元素排除在文档流之外，即元素脱离文档流，不受默认排列方式（从上到下或者从左往右）的控制

特点二：浮动起来的元素将不再占用页面的空间。（元素从浏览器上原地拔起，从上往下依旧能看到浮动元素），有可能会压住其他的元素。

特点三：元素会停靠在包含框（父层元素）的左边或左边，或者停靠在已经浮动的元素的左边或者右边

特点四：元素无论怎么浮动，最终还是在包含框之内。

特点五：块级浮动之后，宽度自适应不是100%

特点六：行内元素浮动后，除了具备以上特点，它将变成块级元素，行内元素设置浮动多数是为了改变宽和高。

浮动属性：

float:定义当前元素浮动

取值：

none（默认没浮动）

left（浮动方向左边）

right（浮动方向右边）

下面做一个小练习希望对web爱好者有一个小小的帮助。可以拿代码过去看效果哦！

<!DOCTYPE HTML>

<html>

<head>

<style>

div{

width:200px;

height:200px;

}

#d1{

background-color:red;

float:right;

/*一共三个div块级元素上下排列，设置第一个div向右浮动，后面两个补上*/

}

#d2{

background-color:yellow;

}

#d3{

background-color:green;

}

</style>

</head>

<body>

</body>

</html>

更多知识关注小编，或者百度网络营销师钟震，钟震讲网络营销。会有很多相关知识，公众号网络营销师钟震，以后每天都会分享web，淘宝运营，竞价，网站建设和优化，社媒方面的知识。与大家共同进步。希望对您有一点点帮助，喜欢记得关注公众号。

HTML meta charset 属性

上一篇：CSS学习笔记--定位position属性的学习
下一篇：html开发笔记22-表单元素「用户名、密码、单选框、多选框」

六个角度剖析css中的浮动定位（css中浮动的定义）

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

接口测试遇到500报错?别慌，你的头部可能有点问题

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

现在页面实时聊天都使用Websocket技术实现吗?

关于HTML5被简称做H5，你怎么看?（html5缩写）