几个关于浮动的问题

老师您好，在学习完课程后自己进行尝试时遇到几个关于浮动的问题，希望能得到老师解答：

这是正常情况下的浮动效果，为了方便实验我将原本纯白的购物车图片换成了更加显眼的图片

这是index中的源代码，

这是css中的源代码

接下来是我的实验和问题：

1、将btn中的右浮动删掉，保留价格的左浮动，结果如图：

①为什么这里的背景框与图片发生了分离？

②这里的价格是左浮动效果，价格的右边还有很大的宽度，为什么图片不排列在价格的右边而是下面，就像之前举的文字环绕的例子一样？

③虽然这样看起来价格的右边空无一物，但是鼠标放上去还是有手指的箭头，也就是这里空白区域还是存在超链接，但是看源代码，<a>的范围仅限于图片，而且图片与背景的高度宽度都是有明确的规定，为什么这个超链接的范围会扩展到这么广呢？

2、将价格的左浮动删掉，保留btn的右浮动，结果如图：

为什么btn不排列在价格的右边呢？使用浮动后，脱离文档流，不是就不遵循块状元素的排列规则了么？而且不管怎么设置价格的宽度，btn都如上图所示排列，不会发生变化

最后一个问题是，浮动是不是永远都不会与其他元素产生重叠，不管是左浮动还是右浮动，只要相关位置已有其他元素，都会默认让位进行排列呢？

谢谢老师！

weixin_慕数据1559209 2020-07-01

源自：前端油画商城案例 4-2 案例总结

收起

3回答

时间， 2020-07-04 09:55:18

同学，你好。

1、脱离文本流和脱离文档流没有关系，浮动只是脱离了文档流，若没有设置btn的度度，则图片是在文字后边的，在一行显示，和文字环绕效果是类似的，只不是这是图片环绕文字

文字是属于文本流，还会占据应有的宽度，因此设置了宽度之后，图片会在文字下方

图片和文字之间有距离是因此图片设置了居中对齐，

2、都设置浮动之后，父元素的高度塌陷，是没有大小的，

3、btn对应的是div，浮动之后会脱离文档流，文字是属于文本流。

4、例子中只是价格所在div设置了浮动，图片的在div没有设置浮动，只是把width值调大了。同学可以看下截图中的代码和css都是有的，同学可以在本地根据代码实际操作一下，可以更好的理解

如果我的回答解决了您的疑惑，请采纳！祝学习愉快~~~~

收起回答

时间， 2020-07-03 10:01:43

同学，你好。

问题一：

①②：背景与图片并没有分离，价格所在div设置了左浮动，会脱离文档流，但不会脱离文本流，文字属于文本流，btn所在div设置了宽度和高度，文字和图片加起来的宽度会大于实际宽度，因此图片会在下方显示。在去掉宽度和背景色之后，可以看到图片和文字会在一行显示

③选中a标签可以看到实际大小是300x30，和外层div大小是一致的，因此点击空白位置也是会有超链接的

问题二：

1、价格所在div是块级元素，即使设置了width也会占据一行显示，因此图片所在div不会与价格在一行显示

2、设置浮动后，会脱离文档流，后边的元素会向上移动，产生重叠的效果，但是文本流中的内容不会重叠

例：价格所在div设置浮动，设置具体宽度并添加背景颜色后，可以看到btn所在div向上移动，黄色背景会覆盖住红色背景

如果我的回答解决了您的疑惑，请采纳！祝学习愉快~~~~

收起回答

提问者 weixin_慕数据1559209 #1

问题一： ①②老师，我还是无法理解，脱离文本流和脱离文档流有什么关系呢？btn设置了高度和宽度后，为什么文字和图片加在一起会大于实际宽度呢？图片宽度不是一直都比红色背景小，红色背景不是也一直保持60的宽度不变么？还有就是为什么就算取消了宽度和背景色，价格和图片也没有挨在一起呢？这两的宽度都是已知的，在您截的图中，价格和图片中间的宽度是什么呢 ③a标签的宽度会随着是否浮动改变么？如果a标签的宽度是300的话，那么在最开始，两者都浮动的时候a的宽度也是300才对呀，为什么那个时候只有btn那么宽了呢问题二：在本例中，btn属于文档流还是文本流呢？文字或者图片的背景颜色属于文本流还是文档流呢？您举的这个例子就是双方都浮动，就会同时呈现在一排的意思么

2020-07-03 22:51:36

好帮手慕笑蓉 2020-07-01 11:33:53

同学，你好。请将代码粘贴到问答区，方便老师测试问题，帮助同学解答。

祝学习愉快~

收起回答

提问者 weixin_慕数据1559209 #1

老师我是将截图上显示的代码复制过来还是将全部代码复制过来？如果是全部代码的话会超出字数限制

2020-07-01 11:37:59
好帮手慕笑蓉回复提问者 weixin_慕数据1559209 #2

同学，你好。因为css中元素的设置会相互影响，需要全部的代码，同学可以选择分几次粘贴。祝学习愉快~

2020-07-01 15:50:37
提问者 weixin_慕数据1559209 #3

index的代码1 <!DOCTYPE html> <html> <head> <title>商城</title> <link rel="stylesheet" type="text/css" href="css/common.css"> <script type="text/javascript" src="js/js1.js"></script> </head> <body> <div class="header"> <div class="logo"> <img src="image\logo.png"> </div> <div class="menu" onmouseleave="show_menu1()"> <div class="menu_title" onclick="show_menu()"> <a href="#">内容分类</a></div> <ul id="menu1"> <li>现实主义</li> <li>抽象主义</li> </ul> </div> <div class="auth"> <ul> <li><a href="#">注册</a></li> <li><a href="#">登陆</a></li> </ul> </div> </div> <div class="content"> <div class="banner"> <img src="image/welcome.png" class="banner-img"> </div> <div class="img-content"> <ul> <li> <img src="image/wumingnvlang.jpg" class="img-li"> <div class="info"> <h3>无名女郎</h3> <p>图片描述可以分为多种，一种是单一说明，就比如直接的告诉看图者这篇文章是要介绍什么样子的内容，一些配图可以分为含蓄类型的，这样的配图一般会图片描述可以分为多种. </p> <div class="img-btn"> <div class="price">￥5800</div> <a href="#" class="cart"> <div class="btn">  <img src="image/wudaojiaoshi.jpg"> </div> </a> </div> </div> </li> <li> <img src="image/wumingnvlang.jpg" class="img-li"> <div class="info"> <h3>无名女郎</h3> <p>图片描述可以分为多种，一种是单一说明，就比如直接的告诉看图者这篇文章是要介绍什么样子的内容，一些配图可以分为含蓄类型的，这样的配图一般会图片描述可以分为多种. </p>

2020-07-03 08:10:32