<!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
69
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
CSS float（浮动）
目录
相关文章
|
7月前
|
前端开发
|
3月前
|
前端开发
CSS 浮动属性讲解和使用
本文介绍了CSS中的浮动(float)属性，包括其基本功能、属性选项及其在网页布局中的应用。浮动使元素脱离文档流，向左或右排列，周围元素随之调整。文章还详细讲解了清除浮动的方法，如使用clear属性、设置父元素高度、利用overflow属性、伪元素等，以解决因浮动导致的布局问题。最后，强调了浮动在创建复杂布局时的作用，并预告后续内容。
71
2
2
|
8月前
|
前端开发
容器
CSS基础-浮动：float与清除浮动
【6月更文挑战第9天】本文介绍了CSS中的`float`属性，用于创建多列布局和图文混排，但会导致浮动塌陷和元素重叠问题。为解决这些问题，文章探讨了`clear`属性的四种清除浮动方法，包括`clear`属性、空元素、伪元素和`overflow`方法。随着Flexbox和Grid布局的兴起，它们在某些场景下替代了浮动，但理解浮动原理仍是布局基础。掌握浮动和清除浮动技巧对构建稳定布局至关重要。
95
5
6
|
5月前
|
前端开发
|
5月前
|
前端开发
【前端web入门第六天】01 CSS浮动
这是关于CSS布局第六天学习目标的介绍，主要解决多个`<div>`标签在同一行显示的问题，即一个在左边，另一个在右边。文中介绍了标准流、浮动及flex布局的概念，重点推荐使用flex布局。文章详细讲解了浮动的基本使用、布局技巧及清除浮动的方法，包括额外标签法、单伪元素法、双伪元素法和`overflow`隐藏法，并提供了示例代码帮助理解。
60
6
6
|
5月前
|
6月前
|
6月前
|
前端开发
容器
|
7月前
|
前端开发
|
8月前
|
前端开发
容器
热门文章
最新文章
1
css3实现3D数字时钟滚动特效代码
2
精通 CSS 阴影效果：从基础到高级应用
3
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
4
html+js+css实现的建筑方块立体数字时钟源码
5
css3 svg制作404页面动画效果HTML源码
6
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
7
CSS 居中技术完全指南：从基础到高级应用
8
CSS 过渡和动画
9
Css实现文本超出长度隐藏并用三个点结尾
10
“弘五四,耀青春”程序创意获奖作品【html+css】
1
C# 字节数组与INT16,float,double之间相互转换，字符数组与字符串相互转换，
329
2
在Java中为什么不推荐使用Float
114
3
魔性的float浮点数精度问题
79
4
牛客网刷题总结1.利用%符号获取特定位数的数字。2.强制类型转换 （将float转换为int ）3.计算有关浮点型数据时，要注意你计算过程中所有的数据都是浮点型
85
5
时隔多年，从新认识浮动float
103
6
百度搜索：蓝易云【Java语言之float、double内存存储方式】
110
7
计算 int, float, double 和 char 字节大小
110
8
【深入理解计算机系统】int 不是整数 | float 不是实数 | 内存引用错误的例子 | 学习笔记
96
9
CSS布局讲解-float浮动布局使用
106
10
float与double精度丢失问题
142