浮动
一.什么是浮动（float)
浮动就是让元素可以向左或向右移动，直到它的外边距碰到其父级的内边距或者是上一个元素的外边距(这里指的上一个元素不管它有没有设置浮动，都会紧挨着上一个元素）
二.浮动（float)语法：
float:left或者right或者none或者inherit
left：让元素向左浮动
right：让元素向右浮动
none：让元素不浮动
inherit：让元素从父级继承浮动属性
三.浮动的特性
1.支持所有的css样式
2.内容撑开宽高
3.多个元素设置浮动，会排在一排
4.浮动的框可以向左或者向右移动，直到他对外边缘碰到包含框或 另一个浮动框的边框为止。
5.文档流
四.浮动的具体表现
六、代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>不框架的开始就浮动</title>
<style type="text/css">
#father{
width: 600px;
height: 30px;
background: lightblue;
margin: 100px auto 0;
}
#son1{
width: 500px;
height: 100%;
background: lightgreen;
float: left;
}
#son2{
width: 100px;
height: 100%;
background: lightpink;
float: left;
}
</style>
</head>
<body>
<!-- 浮动的框可以向左或者向右移动，直到他对外边缘碰到包含框或 另一个浮动框的边框为止。
文档流 -->
<div id="father">
<div id="son1">
</div>
<div id="son2">
</div>
</div>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· winform 绘制太阳，地球，月球 运作规律
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具