为什么header和footer设置float属性后，footer没有紧贴header之后显示呢？

<!DOCTYPE html>

<html>

<head>

/*此处写代码*/

*{margin:0;padding:0;}

.header,.footer{width:30%;height:40px;float:left;background:red;border:2px solid blue;}

.cont{background:green;height:80px;width:60%;}

</style>

</head>

<body>

</div>

</div>

</div>

</body>

</html>

源自：CSS网页布局基础 3-2 圣杯布局案例（了解即可）

收起

2回答

好帮手慕言 2020-03-01 19:00:09

同学你好，cont也是占据位置的，footer不会紧贴在header后面显示，一般情况下，为了避免出错，浮动元素的兄弟级元素也会设置浮动。

如果还有其他疑问，建议在问答区重新提问，便于后期查找总结

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

好帮手慕言 2020-03-01 16:43:10

同学你好，使用浮动，footer不会排在header后面。可以使用定位调整偏移值实现。代码如下：

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

提问者尛黒伱白了 #1

我问的不是这个意思是我给头尾左浮动他们不是应该脱离文档流吗尾不是应该跟随头之后吗 container我也没设置浮动

2020-03-01 16:47:41
提问者尛黒伱白了 #2

难道是因为给浮动的两个之间不能放没有设置浮动的元素吗

2020-03-01 16:49:44
提问者尛黒伱白了 #3

使用浮动，为什么footer不会排在header后面呢不是已经脱离文档流了吗

2020-03-01 17:02:27