如果在一行内写文字，文字过多，那么浏览器会自动换行去显示我们的文字
文字还有图片大小不一，都会让我们页面的元素出现高矮不齐的现象，但是在浏览器查看我们的页面总会发现底边对齐
例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title</title> <style> p:first-letter{font-size:50px} </style> </head> <body> <p>test123</p> </body> </html>效果测试：
多个空格会被合并成一个空格显示到浏览器页面中。img标签换行写。会发现每张图片之间有间隙，如果在一行内写img标签，就解决了这个问题，但是我们不会这样去写我们的html结构。这种现象称为空白折叠现象
浮动是css里面布局最多的一个属性，也是很重要的一个属性
表示浮动的意思，它有三个值：
none: 表示不浮动，默认
left: 表示左浮动
right：表示右浮动
看一个例子：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title</title> <style> .div1{background: rosybrown} .div2{background: cadetblue} </style> </head> <body> <div>div1</div><div>div2</div> </body> </html>
效果展示：
发现一个div就占了整整一行，因为div是块级标签，所以默认占一行，那么在实际的开发中，我们也许就需要把这两哥div放在同一行，那么这就可以设置浮动属性：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title</title> <style> .div1{ background: rosybrown; float: left; } .div2{ background: cadetblue; float: left; } </style> </head> <body> <div>div1</div><div>div2</div> </body> </html>
效果展示：
看到了吧，这就是浮动的效果
脱标意思就是脱离标准文档流，其元素不再受文档流的控制。什么意思呢？直接看例子：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title</title> <style> .div1{ width: 200px; height: 200px; background-color: red; float: left; } .div2{ width: 400px; height: 400px; background-color: yellow; } span{ background-color: green; float: left; width: 300px; height: 50px; } </style> </head> <body> <div>div1</div> <div>div2</div> <span>test</span> </body> </html>
效果展示：
发现什么没有？由于div1设置了浮动向左的效果，而div2没有设置，这就直接导致div1看起来放在div2的上面了对吧？原因是这样的，由于div2没有设置浮动，div1设置了浮动，div1就脱离了标准文档流，所在位置不在文档流内，而div2在，浏览器则把div2作为文档流内的第一个进行排版渲染到了第一个位置上，div1直接给浮起来了。这个现象就是脱标，或者你可以说成浮起来了或者飘起来了
而注意看下面的span标签，由于span标签本来是行内标签，但是由于设置了浮动，居然也可以设置宽高了。
所以这里要注意，所有元素一旦设置浮动，就能够并排，并且都不区分块级标签和行内标签，都可以设置宽高
这个互相贴靠，在上面那个例子里的就是贴靠的状态了
但是还是要注意两点：
如果父元素有足够的空间，那么盒子从左到右相互贴靠。
如果父元素没有足够的空间，那么不够放的盒子会另起一行贴靠
例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title</title> <style> .box1{ width: 900px; height: 400px; float: left; background-color: red; } .box2{ width: 150px; height: 450px; float: left; background-color: yellow; } .box3{ width: 300px; height: 300px; float: left; background-color: green; } </style> </head> <body> <div>1</div> <div>2</div> <div>3</div> </body> </html>
效果：
这个就跟你们学办公软件word调整文章样式一样的，直接上例子：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title</title> <style> *{ padding: 0; margin: 0; } div{ float: left; } p{ background-color: #666; } </style> </head> <body> <div> <img src="https://www.baidu.com/img/bd_logo1.png" alt=""> </div> <p> 123中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国 </p> </body> </html>
效果：
这里就是因为当div浮动，p不浮动，div遮盖住了p，div的层级提高，但是p中的文字不会被遮盖，此时就形成了字围效果
一个浮动元素如果没有设置width，那么就自动收缩为文字的宽度
例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title</title> <style> div{ float: left; background-color: darkcyan; } </style> </head> <body> <div>test</div> </body> </html>
效果展示：
由上面的浮动特性，我们已经可以得知，脱标的话，很可能会影响我们的页面效果（除了本来就需要这种效果以外），而且在以后的web页面开发中，可能你会遇到由上面的div设置了浮动，导致下面的div排版不正常，影响页面布局，例如：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title</title> <style> * { padding: 0; margin: 0; } .father { width: 1126px; /*子元素浮动 父盒子一般不设置高度*/ /*出现这种问题，我们要清除浮动带来影响*/ /*height: 300px;*/ } .box1 { width: 200px; height: 500px; float: left; background-color: red; } .box2 { width: 300px; height: 200px; float: left; background-color: green; } .box3 { width: 400px; float: left; height: 100px; background-color: blue; } .father2 { width: 1126px; height: 600px; background-color: purple; } </style> </head> <body> <div> <div></div> <div></div> <div></div> </div> <div></div> </body> </html>
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/1546.html
摘要：默认值，没有定位，元素出现在正常的文档流中。生成粘性定位的元素，容器的位置根据正常文档流计算得出。和属性的异同共同点对内联元素设置和属性，可以让元素脱离文档流，并且可以设置其宽高。 position的值， relative和absolute分别是相对于谁进行定位的？ 、relative:相对定位，相对于自己本身在正常文档流中的位置进行定位。、absolute:生成绝对定位，相对于最近一...
摘要：内核原为，现为内核，等。但盒子的大小由这几部分决定是一个属性，与盒子模型有着密切联系。 前言 貌似又到了一年一度跑路跳槽的时刻，由于个人的一些原因最近也参加了很多面试，发现有很多基础性的东西掌握程度还是不够，故此想总结一下最近面试遇到的问题以及个人认为比较重要的东西，留给自己消化，也分享给有需要的小伙伴 GitHub完整版面试题，欢迎小伙伴们star关注 如果文章中有出现纰漏、错误之处...
摘要：内核原为，现为内核，等。但盒子的大小由这几部分决定是一个属性，与盒子模型有着密切联系。 前言 貌似又到了一年一度跑路跳槽的时刻，由于个人的一些原因最近也参加了很多面试，发现有很多基础性的东西掌握程度还是不够，故此想总结一下最近面试遇到的问题以及个人认为比较重要的东西，留给自己消化，也分享给有需要的小伙伴 GitHub完整版面试题，欢迎小伙伴们star关注 如果文章中有出现纰漏、错误之处...
摘要：正文属性样式表正文属性样式表了解了具体的各种工作原理使用方式选择器规则层叠算法等之后，那么该来学习的也就是都支持哪些属性样式表了。 本篇文章已授权微信公众号 dasu_Android（大苏）独家发布 声明 本系列文章内容全部梳理自以下四个来源： 《HTML5权威指南》 《JavaScript权威指南》 MDN web docs Github:smyhvae/web 作为一个前端小白，入...
阅读 426·2023-04-25 19:43
阅读 3621·2021-11-30 14:52
阅读 3414·2021-11-30 14:52
阅读 3347·2021-11-30 14:49
阅读 3275·2021-11-30 14:49
阅读 3520·2021-11-29 11:00
阅读 3487·2021-11-29 11:00
阅读 3518·2021-11-29 11:00
