<!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
49
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
CSS float（浮动）
目录
相关文章
|
2月前
|
前端开发
|
3月前
|
前端开发
容器
CSS基础-浮动：float与清除浮动
【6月更文挑战第9天】本文介绍了CSS中的`float`属性，用于创建多列布局和图文混排，但会导致浮动塌陷和元素重叠问题。为解决这些问题，文章探讨了`clear`属性的四种清除浮动方法，包括`clear`属性、空元素、伪元素和`overflow`方法。随着Flexbox和Grid布局的兴起，它们在某些场景下替代了浮动，但理解浮动原理仍是布局基础。掌握浮动和清除浮动技巧对构建稳定布局至关重要。
37
5
6
|
6天前
|
前端开发
【前端web入门第六天】01 CSS浮动
这是关于CSS布局第六天学习目标的介绍，主要解决多个`<div>`标签在同一行显示的问题，即一个在左边，另一个在右边。文中介绍了标准流、浮动及flex布局的概念，重点推荐使用flex布局。文章详细讲解了浮动的基本使用、布局技巧及清除浮动的方法，包括额外标签法、单伪元素法、双伪元素法和`overflow`隐藏法，并提供了示例代码帮助理解。
16
6
6
|
11天前
|
24天前
|
1月前
|
前端开发
容器
|
2月前
|
前端开发
|
3月前
|
前端开发
容器
|
2月前
|
编解码
前端开发
C++
CSS【详解】布局 display （ 含 flex 布局，grid 布局，table 布局，float 布局，响应式布局 等）
CSS【详解】布局 display （ 含 flex 布局，grid 布局，table 布局，float 布局，响应式布局 等）
92
0
0
|
2月前
|
前端开发
热门文章
最新文章
1
如何用 CSS 和 D3 创作一个抽象的黑白交叠动画
2
ASP.NET 2.0中CSS失效的问题总结(转)
3
CSS代码记录
4
jQuery和CSS3打造的3D炫酷特效
5
12款精美的免费 CSS 网页模板下载
6
细节决定成败——无CSS时网页的可读性
7
CSS3自定义发光radiobox单选框
8
CSS3 flex 布局在 wrap 换行模式下，让中间指定元素换行
9
Css3 圆角和渐变色问题(IE9)
10
利用 hover 伪类创建纯 CSS 收缩面板
1
C# 字节数组与INT16,float,double之间相互转换，字符数组与字符串相互转换，
126
2
Python系列（16）—— string类型转float类型
112
3
在Java中为什么不推荐使用Float
57
4
魔性的float浮点数精度问题
46
5
牛客网刷题总结1.利用%符号获取特定位数的数字。2.强制类型转换 （将float转换为int ）3.计算有关浮点型数据时，要注意你计算过程中所有的数据都是浮点型
53
6
时隔多年，从新认识浮动float
65
7
百度搜索：蓝易云【Java语言之float、double内存存储方式】
88
8
Python float(input())的用法，web中的应用
118
9
计算 int, float, double 和 char 字节大小
75
10
【深入理解计算机系统】int 不是整数 | float 不是实数 | 内存引用错误的例子 | 学习笔记
60