                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /CSS深入理解之float浮动

float和margin

在上一个块元素中加上浮动，下一个块元素清除浮动并加上margin-top,这里的外边距为什么没有展示出来？

ohitisme

2017-01-05

源自：CSS深入理解之float浮动 4-2

关注问题我要回答

1055

操作

收起

6 回答

weixin_慕标1565747
2019-04-05

clear：both是加在父元素内容的底部，你这里都没有父元素，清除哪个的高度塌陷？

1 回复有任何疑惑可以回复我~

收起回答

qq_一桥轻雨一伞开_2
2017-08-03

外边距合并(塌陷)问题

0 回复有任何疑惑可以回复我~

收起回答

Hello立国
2017-01-06

我也不知道这个问题该怎么解释，但是我在你这2个 div 的上层又添加了一个 div，并设置了 border 后，好像就没什么问题了。但如果不加这个上层 div 的话，貌似 .clrfloat 的 margin-top 确实是不太正常。

我添加的代码如下：

<style>

#box {

border: 1px solid #333;

}

</style>

<body>

<div class="div00">float</div>

<div class="clrfloat">hello</div>

</div>

</body>

其它的 CSS 代码跟你的一样。

0 回复有任何疑惑可以回复我~

收起回答

ohitisme 提问者

上层有元素就能显示正常，不知道是什么原因，我去问问，有答案的话再贴回来

2017-01-06 回复有任何疑惑可以回复我~

Hello立国
2017-01-06

你用的什么浏览器？我在最新版火狐上测试是没有问题的呀。

0 回复有任何疑惑可以回复我~

收起回答

ohitisme 提问者

chrome

2017-01-06 回复有任何疑惑可以回复我~

ohitisme 提问者

我在火狐上测试也是一样的，50.1.0版本

2017-01-06 回复有任何疑惑可以回复我~

ohitisme 提问者
2017-01-06

样式表里是这样：

.div00 {

width: 50px;

height: 50px;

float: left;

margin-bottom: 50px;

background-color: blue;

}

.clrfloat {

width: 50px;

height: 50px;

margin-top: 200px;

background-color: red;

clear: both;

margin-bottom: 100px;

}

文档中的位置是这样的：

<div class="div00">float</div>

<div class="clrfloat">hello</div>

两个div的样式大致就是这样，但是上外边距就一直没有效果

0 回复有任何疑惑可以回复我~

收起回答

Hello立国

我大概理解你问的问题了，我在琢磨琢磨。

2017-01-06 回复有任何疑惑可以回复我~

Hello立国
2017-01-06

能把代码样式给出吗

0 回复有任何疑惑可以回复我~

收起回答

ohitisme 提问者

在下面的回答里

2017-01-06 回复有任何疑惑可以回复我~

0/150

提交

取消

CSS深入理解之float浮动

参与学习 75956 人
解答问题 467 个

课程将会从感性的认识的角度讲解CSS float属性，浮动的前世今生

进入课程

本课相似问答

2 回答float和文档流

1 回答图片文字环绕 align 和 float 有区别吗？

2 回答float问题

1 回答float的滥用？？？

1 回答float怎么理解

搜索更多本课相关问答

float和margin

我要回答关注问题

热搜

最近搜索清空

float和margin

6 回答

本课相似问答

float和margin