老师使用float浮动后那么他的外间距是和哪个元素的？还是和浮动前一样吗？

散落满天的回忆 2019-10-08

源自：前端油画商城案例 4-3 项目作业

收起

2回答

好帮手慕小班 2019-10-09 18:45:25

同学你好，下面来一一回答同学的问题：

1、如果父div没有设置宽高属性，是由子div的元素撑起来的，那此时子div浮动后，会造成父元素的高度塌陷。

2、元素浮动后，是脱离标准文档流的，此时的外边距是作用在脱离标准文档流的，是飘在页面上面的，所以不建议使用脱离标准文档流的外边距。

3、浮动后的元素与没有浮动的元素是会发生重叠的。

4、浮动后的元素与浮动后的元素，不会发生重叠，所以不会出现"元素浮动后这个元素可以利用外边距移动到浮动了的的元素上"。

5、不会重叠。

6、div1和div2的外边距一样，它们都是脱离标准文档流的内容，所以会在页面的上面按照浮动顺序一一排列。

7、div1与div2的margin就是此时aa与bb之间的间距，这就是这两个div之间的间距。

如上所示aa旁边的橙色区域就是div1的margin(外边距的内容)呐。

建议同学再去复习一下浮动与定位章节中的内容哦。

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

收起回答

好帮手慕小班 2019-10-09 13:16:38

同学你好，使用float浮动后，依然是有外边距，只是使用浮动后，元素脱离了标准文档流，是漂在上面的，所以此时的margin是针对脱离标准文档流的元素的，例如：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
   .div0{width:100px;height:100px;background-color: lightblue;}
    .div1{float: left;margin: 10px;}
    .div2{float: left;margin: 10px;}
    .div3{background-color:#f60;}
</style>
</head>
<div class="div0">
    <div class="div1">
aa
</div>
<div class="div2">
   bb
</div>
<div class="div3">
   cc
</div>
</div>
</body>
</html>

运行效果如下：

aa与bb都是使用了float: left;脱离标准文档流的内容，此时他们的margin还是存在的，如上所示，橙色区域就是margin的内容。

而对应cc就是标准文档流内的内容，aa和bb是漂在cc上面的。

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

收起回答

提问者散落满天的回忆 #1

老师，把div和div里面的元素浮动后那么div的高度和宽度还能被浮动后的元素撑起来吗？把元素浮动后这个元素可以利用外边距移动到没有浮动上的元素上面吗？能够重叠吗？把元素浮动后这个元素可以利用外边距移动到浮动了的的元素上面吗？能够重叠吗？

2019-10-09 17:15:31
提问者散落满天的回忆 #2

老师，为什么div1和div2的外边距一样但是位置不一样？老师，div1div2他们的外边距和和谁之间的距离

2019-10-09 17:19:27