为什么header和footer现在设置浮动后,不紧挨着一起,而是中间有contianer

为什么header和footer现在设置浮动后,不紧挨着一起,而是中间有contianer

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

*{margin: 0;padding: 0;}

body{min-width: 700px;}

.header,.footer{

float: left;

width: 100%;

background: #ddd;

height: 40px;

line-height: 40px;

text-align: center;

}

</style>

</head>

<body>

<div class="header">

<h4>header</h4>

</div>

<div class="container">

<div class="middle">

<h4>middle</h4>

<p>这是页面的中间这是页面的中间这是页面的中间这是页面的中间这是页面的中间这是页面的中间这是页面的中间这是页面的中间这是页面的中间这是页面的中间这是页面的中间这是页面的中间这是页面的中间这是页面的中间这是页面的中间</p>

</div>

<div class="left">

<h4>left</h4>

<p>这是页面的左侧内容</p>

</div>

<div class="right">

<h4>right</h4>

<p>这是页面的右侧内容</p>

</div>

</div>

<div class="footer">

<h4>footer</h4>

</div>

</body>

</html>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕糖 2018-11-12 14:34:03

同学你好,如下,可以f12选择contianer元素,会发现它的高度是从顶部开始的。但是文字是不会上移的,因为浮动会脱离文档流,但是占据文本空间。

http://img1.sycdn.imooc.com//climg/5be91e7500016c6019200688.jpg

若能帮助到你,望采纳。

祝学习愉快!

好帮手慕糖 2018-09-14 09:35:33

你好,这里本身中间就有其他元素,是不会挨着一起哦。

若能帮助到你,望采纳。

祝学习愉快!

  • 那至少contianer应该上移,header应该覆盖一部分contianer才对啊?header并没有清除浮动!应该浮动塌陷才对。没有出现浮动塌陷这是什么原因?
    2018-11-12 13:59:11
  • 那至少contianer应该上移,header应该覆盖一部分contianer才对啊?header并没有清除浮动!应该浮动塌陷才对。没有出现浮动塌陷这是什么原因?
    2018-11-12 13:59:12
  • 王小大 回复 慕码渣 #3
    container 上移了的哦,老师上面有截图的!老师说了 文本依旧会占据文本空间,所以不会直接性跑到 header下面
    2018-11-19 15:59:32
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师