CSS的浮动（上）
创始人
2025-06-01 17:32:05
🌟所属专栏：前端只因变凤凰之路
🐔作者简介：rchjr——五带信管菜只因一枚
😮前言：该系列将持续更新前端的相关学习笔记，欢迎和我一样的小白订阅，一起学习共同进步~
👉文章简介：本文介绍CSS的浮动相关知识。知识学习内容来自b站的@黑马程序员的视频

😃1 传统网页布局的三种方式

🔥浮动

🔥定位

🔥标准流（普通流/文档流）

所谓的标准流，就是标签按照规定好的默认方式排列。例如：

块级元素会独占一行，从上往下顺序排列

  • 常用块级元素：div，hr，p，h1-h6，ul，ol，form，table

行内元素会按照顺序从左到右顺序排列，碰到父元素边缘则自动换行。

  • 常用行内元素：span，a，i，em

注意：实际开发中，一个页面基本都包含这三种布局方式（移动端会有新的布局方式）

😃2 为什么需要浮动

🔥提问

  1. 如何实现一行多个块级元素（如多个div）并列？

  1. 如何实现页面左右两个块级元素的对齐？

🔥总结

有很多布局效果标准流无法完成，但是浮动可以解决，因为浮动可以改变标签默认的排列方式。其中浮动最典型的应用就是让多个块级元素一行内并排。

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

😃3 什么是浮动

float属性用于创建浮动框，将其移动到一边，知道左边缘或右边缘触及包含块或者另一个浮动框的边缘


Document

左边
右边

😃4 浮动的特性

🔥脱离标准流的控制（脱标），浮动的盒子不再保留原先的位置，所以它的位置会被占用

下面的代码将第一个盒子设置为浮动，而第二个盒子没有设置浮动，所以第二个盒子会网上走占据第一个盒子的位置，导致两者重叠了。


Document

左边
右边

🔥如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。


Document

左边
中间
右边

注意：浮动的元素是紧贴在一起的，不会有缝隙。如果父级宽度装不下这些浮动的盒子，多出的盒子则会另起一行

🔥浮动元素会具有行内块元素特性

例如span作为行内元素原本没有宽高（需要转换为行内块元素），但是若给他添加浮动，则不需要转换成行内块元素


Document
1
2
pppb

注意：如果块级盒子没有设置宽度，则默认宽度和父级一样宽。但是添加浮动后，它的大小根据内容来决定。

😃5 浮动元素经常和标准流父级搭配使用

为了约束浮动元素位置，我们一般先用标准流的父级排列上下位置，之后内部子元素采取浮动排列左右位置，这也符合网页布局第一准则

😃6 三个浮动布局案例——小米商城

下面我们来实现如图的案例


Document

再来实现这个，每个小盒子中间有一些空格


Document

  • 1
  • 2
  • 3
  • 4

最后再做一个手机模块的案例

网页布局第二准则：先布局盒子的大小，再布局盒子的位置


Document

左
2
2
2
2
2
2
2
2

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：上市首秀后，霸王茶姬能睡个好觉了 成功上市霸王茶姬创下了哪些记录 霸王茶姬上市原视频

下一篇：1.freertos应用系列之cubemx创建freertos

相关内容

热门资讯

6.3股市早8点丨三天假发生了... 三天假发生了啥事？股市早8点 老沙自媒体2025年6月3日（周二）每日大道正道消息▊美股小涨北京时间...
绿通科技：拟现金收购大摩半导体... 【绿通科技筹划收购大摩半导体不低于51%股权】6月2日晚间，绿通科技公告，筹划现金收购江苏大摩半导体...
股市必读：爱博医疗（68805... 截至2025年5月30日收盘，爱博医疗(688050)报收于71.41元，下跌1.76%，换手率1....
销售会“提问”，再冷淡的客户，... 回复“9”限时领《9套销售话术资料包》 作者：Dora 在销售咨询过程中，“高效提问”不仅是获取客户...
原创 德... 2025年2月24日，恰逢俄乌冲突爆发三周年，德国也于前一天举行了新一轮的议会选举。在过去的三年中，...
明天沪主板新股海阳科技申购！聚... 明天，沪主板将迎来一家新股申购！ 格隆汇获悉，海阳科技（603382）于6月3日申购，发行价格为11...
三一重工、山推股份谋求赴港上市... 本报（chinatimes.net.cn）记者李贝贝 上海报道工程机械龙头企业纷纷瞄准港股市场：5月...
2024跨境电商平台出海目的地... 今天分享的是：2024跨境电商平台出海目的地中东市场：行业呈现三足鼎立态势，物流和支付是竞争关键 报...
虎嗅【作·嗅之星】周榜第264... 作·嗅之星榜单，以周榜的形式，呈现每周新鲜出炉的优秀作品。2025年5月23日～2025年5月29日...
原创 美... 尊敬的审阅人员和品鉴读者：本文是经过严格查阅相关权威文献和资料。 全文数据有据可依，可供查证。 美...
原创 美... 前言 中国商务部那间熟悉的发布厅里，发言人拿出一摞资料，语气格外严肃。 说好了一起守规矩，结果呢？...
原创 节... 不出意外，大家的仓位越来越轻了。 如果目前的位置是今年的顶部，为什么要想方设法驱赶散户离场呢？大家都...
美股下跌，钢铁股大涨！金价重回... 6月2日，美国三大股指开盘走低，截至22:40发稿，道指跌0.5%，标普500指数跌0.25%，纳斯...
深康佳A：拟择机出售武汉天源不... 新京报贝壳财经讯 深康佳A6月2日晚间公告，目前公司持有武汉天源(301127)股份合计8618.4...
深夜，利空！直线跳水！ 深夜利... 美国经济传来利空信号。今晚，美股三大指数盘初集体跳水，道指一度跌超1%。消息面上，ISM公布的数据显...
这个账单，决定后半辈子幸福… ... 图：Hiroki Kawanabe 第一波延迟退休的人出来了。 挺多人晒出来的退休年龄数字，已经有零...
国际金价年内上涨超25%5月纳... 【#国际金价年内上涨超25%##5月纳指涨幅接近10%#】首先来看美股上周交易的情况。受美欧贸易谈判...
深夜！美股下跌，黄金白银原油飙... 北京时间6月2日晚间，美股低开低走。截至22:02，道琼斯跌0.89%，纳斯达克跌0.51%，标普5...
德国银行高管：美政府政策频繁变... 根据德国《商报》6月2日刊发的专访文章，德国国家开发银行复兴信贷银行董事会主席斯特凡·温特尔斯指出，...
理想一季度销量、营收同比有所增... 理想汽车公布2025年第一季度财报。财报显示，第一季度，公司实现营收259亿元，同比增长1.1%；净...
科技破局、全链升级：澳优四大羊... 人们所熟悉的羊奶资源，除了应用在配方奶以外，还有哪些新应用？羊奶的产业化，有哪些技术瓶颈有待突破？ ...
靠卖丸子年入百亿，拿下10万家... 订阅 快刀财经 ▲ 做您的私人商学院一粒鱼丸的逆袭史。作者：朱末来源：快刀财经（ID：kuaidao...
每30秒卖一辆，老牌车企在海外... 你还记得“奇瑞QQ”吗？今年又又又打算上市那个。这张国产汽车销量逆袭并称霸海外的成绩单上，奇瑞是MV...
“近视神药”跌下神坛，“眼药大... “近视神药”能成为百亿大药吗？？作者 | 赵普编辑丨高岩来源 | 野马财经在眼药领域，尤其是备受瞩目...
棕榈油、豆油、菜油：供给预期双... 【油脂市场供需及价差情况分析】棕榈油方面，产地预估产量环比走高，季节性增产临近，供给预期增加。国内港...
这届高考，仍是史上最难 史上最... 作者 |暴雨再过几天，我们会迎来历史上最难的一届高考。你可能会反驳，1335万名考生，比去年少了7万...
关键时刻，日美关系出现重大转折... 作者 | 无疆编辑 | 剑书日 美关系出现一个重大转折，影响可能不亚于贸易协议。就在最近，曾被拜登坚...
深圳半山巨宅底价成交，3749... “老李，听说了吗？大鹏那栋别墅被人底价捡走了！” “真的假的？那个叶老板花大钱建的城堡，现在才卖三千...
郑商所就丙烯期货和期权合约及期... 5月30日，郑州商品交易所就丙烯期货和期权合约及期货业务细则公开征求意见。这意味着我国产量最大的烯烃...
上涨！金饰价格重回1000元大... 随着国际黄金价格上涨，国内金饰价格重新升至每克千元以上。 6月2日，老凤祥金饰品为1000元/克，这...