header和footer左浮动脱离文本刘为啥容器里面三个内容不会被header覆盖

源自：CSS网页布局基础 3-2 圣杯布局案例

收起

3回答

好帮手慕美回答被采纳获得+3积分 2018-09-12 14:04:48

在header里设置了width：100%，相当于header的宽度是铺满整个屏幕的，没有位置放container里的内容，看到页面的效果是正常显示的，其实已经是被覆盖了的

好帮手慕美 2018-09-11 17:58:24

header和footer设置了左浮动，container里的三个小div也设置了左浮动，所以这三个大的div实际上都是脱离文档流的，所以相应div里的内容会依次显示，不会出现内容被覆盖的情况

如果帮助到了你，欢迎采纳！

好帮手慕美 2018-09-11 16:45:14

给header和footer设置了宽度width为100%，所以就会占据100%的宽度，container里的内容会被挤下来，去掉之后就会显示这样的情况：header和footer会被覆盖

提问者 qq_初闻陌小瑞_0 #1

老师为啥 .header设置左浮动的时候 aa bb cc 三个容器没设置浮动不会被.header覆盖？代码如下：<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style type="text/css"> *{margin:0;padding: 0;} body{min-width: 700px;} .header{float:left;width: 100%;background-color: #ddd;height: 40px;line-height: 40px;text-align: center;} .footer{width: 100%;background-color: #ddd;height: 40px;line-height: 40px;text-align: center;} .container{padding: 0 220px 0 200px;} .middle{width: 100%;background-color: #1a5acd;} .left{width:200px;background-color: #f00;} .right{width: 220px;background-color: #30a457;} </style> </head> <body> <div class="header"></div> <div class="container"> <div class="middle">aaaaa</div> <div class="left">bbb</div> <div class="right">ccc</div> </div> <div class="footer"></div> </body> </html>

2018-09-11 21:34:19