<!DOCTYPE html>
<html>
<head>
<style>
.a-box {
width: 445px;
height: 120px;
border: 1px solid red;
padding: 20px;
overflow: hidden;
}
.b-box {
width: 100px;
height: 100px;
border: 1px solid green;
color: red;
}
.c-box {
width: 445px;
height: 120px;
border: 1px solid red;
padding: 20px;
}
.d-box {
width: 100px;
height: 100px;
border: 1px solid green;
float: left;
color: red;
}
</style>
</head>
<body>
<div class="a-box">
浮动指的是让设置了 float 属性的元素脱离正常的位置，在父元素内容区中向左或向右移动，<div class="b-box">没有浮动的元素</div>直到碰到父元素内容区的边界或者其它浮动元素为止，父元素中的文本和行内元素将环绕浮动元素。
</div>
<div class="c-box">
浮动指的是让设置了 float 属性的元素脱离正常的位置，在父元素内容区中向左或向右移动，<div class="d-box">左浮动的元素</div>直到碰到父元素内容区的边界或者其它浮动元素为止，父元素中的文本和行内元素将环绕浮动元素。
</div>
</body>
</html>
CSS float（浮动）
2024-01-06
40
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
CSS float（浮动）
目录
相关文章
|
28天前
|
前端开发
容器
CSS基础-浮动：float与清除浮动
【6月更文挑战第9天】本文介绍了CSS中的`float`属性，用于创建多列布局和图文混排，但会导致浮动塌陷和元素重叠问题。为解决这些问题，文章探讨了`clear`属性的四种清除浮动方法，包括`clear`属性、空元素、伪元素和`overflow`方法。随着Flexbox和Grid布局的兴起，它们在某些场景下替代了浮动，但理解浮动原理仍是布局基础。掌握浮动和清除浮动技巧对构建稳定布局至关重要。
18
5
6
|
6天前
|
前端开发
|
1月前
|
前端开发
UED
容器
纯CSS画浮动卡通蓝天白云草坪动画效果
【6月更文挑战第1天】网页设计中，通过创新技巧，可以使用HTML和CSS模拟云朵漂浮和草地动画效果，提升用户体验。背景实现采用线性渐变动画，使背景颜色从浅青至白平滑过渡并循环移动。云朵效果通过多个不同大小和位置的`<div>`元素，结合CSS的`position: absolute;`和`@keyframes`动画实现浮动。草的动画则是通过三角形形状及`::before`和`::after`伪元素创造，配合不同动画速度和角度模拟自然摆动。完整代码可在提供的链接中下载。
32
1
1
|
15天前
|
前端开发
容器
|
5天前
|
前端开发
|
11天前
|
移动开发
前端开发
HTML5
|
12天前
|
移动开发
人工智能
前端开发
|
1月前
|
前端开发
Web网页制作-知识点（4）——CSS盒子模型、弹性盒模型（flex box)、文档流、浮动、清除浮动、定位、圆角、阴影二
Web网页制作-知识点（4）——CSS盒子模型、弹性盒模型（flex box)、文档流、浮动、清除浮动、定位、圆角、阴影二
22
0
0
|
1月前
|
前端开发
容器
Web网页制作-知识点（4）——CSS盒子模型、弹性盒模型（flex box)、文档流、浮动、清除浮动、定位、圆角、阴影（一）
Web网页制作-知识点（4）——CSS盒子模型、弹性盒模型（flex box)、文档流、浮动、清除浮动、定位、圆角、阴影一
30
0
0
|
2月前
|
存储
Java
百度搜索：蓝易云【Java语言之float、double内存存储方式】
由于使用IEEE 754标准进行存储，float和double类型可以表示非常大或非常小的浮点数，并且具有一定的精度。然而，由于浮点数的特性，它们在进行精确计算时可能会存在舍入误差。在编写Java程序时，需要注意使
69
0
0
热门文章
最新文章
1
CSS中选择器优先级顺序实战讲解
2
10 个超棒的 CSS3 下拉菜单
3
css vertical-align:middle来实现垂直居中
4
前端学习 -- Html&Css -- 背景
5
CSS3 动画一瞥
6
css3-巧用选择器 “:target”
7
如何用纯 CSS 创作一副国际象棋
8
16种基于 CSS3 & SVG 的创意的弹窗效果
9
好程序员web前端技术分享css盒模型
10
《图解CSS3：核心技术与案例实战》——2.3节层次选择器
1
【掰开揉碎】Flex 布局与 Float
66
2
Python浮点型(float)
27
3
QT里面字符串转ieee754标准的float浮点数
46
4
C# 字节数组与INT16,float,double之间相互转换，字符数组与字符串相互转换，
101
5
Python系列（16）—— string类型转float类型
60
6
c语言中float的作用类型
74
7
在Java中为什么不推荐使用Float
38
8
魔性的float浮点数精度问题
33
9
牛客网刷题总结1.利用%符号获取特定位数的数字。2.强制类型转换 （将float转换为int ）3.计算有关浮点型数据时，要注意你计算过程中所有的数据都是浮点型
34
10
时隔多年，从新认识浮动float
46