关于CSS中的float可能出现的小问题
关于CSS中的float可能出现的小问题
- 前言:最近学习CSS的float所遇到点小问题,然后顺便分享给大家。
一、什么是CSS以及float
(一) CSS概述
CSS是层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
(二) float概述
float属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。
如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。
二、float可能出项的问题
(一) 当没有父级块明确的边界时,float可能没有预想的效果
1.没有明确的边界
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8" /> 6 <title>floatTest</title> 7 <style type="text/css"> 8 #d1 { 9 float: left; 10 width: 100px; 11 height: 100px; 12 background-color: red; 13 } 14 15 #d2 { 16 float: left; 17 width: 100px; 18 height: 100px; 19 background-color: green; 20 } 21 22 #d3 { 23 float: left; 24 width: 100px; 25 height: 100px; 26 background-color: blue; 27 } 28 </style> 29 </head> 30 31 <body> 32 <div style="width:auto; border:solid 1px black;"> 33 <!--<div style="width: 300px;height: 300px;border: solid 1px black;">--> 34 <div id="d1"> 35 d1 36 </div> 37 <div id="d2"> 38 d2 39 </div> 40 <div id="d3"> 41 d3 42 </div> 43 </div> 44 45 </body> 46 47 </html>
浮动前
浮动后
2.有明确的边界时
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8" /> 6 <title>floatTest</title> 7 <style type="text/css"> 8 #d1 { 9 float: left; 10 width: 100px; 11 height: 100px; 12 background-color: red; 13 } 14 15 #d2 { 16 float: left; 17 width: 100px; 18 height: 100px; 19 background-color: green; 20 } 21 22 #d3 { 23 float: left; 24 width: 100px; 25 height: 100px; 26 background-color: blue; 27 } 28 </style> 29 </head> 30 31 <body> 32 <!--<div style="width:auto; border:solid 1px black;">--> 33 <div style="width: 200px;height: 200px;border: solid 1px black;"> 34 <div id="d1"> 35 d1 36 </div> 37 <div id="d2"> 38 d2 39 </div> 40 <div id="d3"> 41 d3 42 </div> 43 </div> 44 45 </body> 46 47 </html>
浮动前
浮动后
3.总结
在选择需要进行浮动操作的时候,一定要明确浮动的边界,这样才能出想要的效果。
(二) 对div块的设定导致的问题
1.div范围定义较小
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8" /> 6 <title>floatTest</title> 7 <style type="text/css"> 8 .divs { 9 /*float: right;*/ 10 } 11 12 .divs div { 13 float: right; 14 } 15 16 #d1 { 17 width: 100px; 18 height: 100px; 19 background-color: red; 20 } 21 22 #d2 { 23 width: 100px; 24 height: 100px; 25 background-color: green; 26 } 27 </style> 28 </head> 29 30 <body> 31 <div style="width: 700px;height: 700px;border: solid 1px black;"> 32 <div style="width: 200px;height: 200px;border: solid 1px black;" class="divs"> 33 <div id="d1"> 34 d1 35 </div> 36 <div id="d2"> 37 d2 38 </div> 39 </div> 40 </div> 41 42 </body> 43 44 </html>
浮动前
浮动后
2.合理的div块定义
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8" /> 6 <title>floatTest</title> 7 <style type="text/css"> 8 .divs { 9 float: right; 10 } 11 12 .divs div { 13 /*float: right;*/ 14 } 15 16 #d1 { 17 width: 100px; 18 height: 100px; 19 background-color: red; 20 } 21 22 #d2 { 23 width: 100px; 24 height: 100px; 25 background-color: green; 26 } 27 </style> 28 </head> 29 30 <body> 31 <div style="width: 700px;height: 700px;border: solid 1px black;"> 32 <div style="width: 200px;height: 200px;border: solid 1px black;" class="divs"> 33 <div id="d1"> 34 d1 35 </div> 36 <div id="d2"> 37 d2 38 </div> 39 </div> 40 </div> 41 42 </body> 43 44 </html>
浮动前
浮动后
3.总结
当我们将整个divs块下的元素都进行了右浮动,但是我们以为这就是将divs块进行了移动,但是其实只是d1和d2块在divs块中进行了移动,divs块并没有动,所以当我们要移动一整块的divs和分别移动的效果是完全不一样的,所以一定要注意这样的小细节。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析