关于圣杯布局，想问一下容器里面的overflow:hidden;有什么用？

关于圣杯布局，想问一下容器里面的overflow:hidden;有什么用？我注意到取消了这一句后在IE7的浏览器上左侧的部分显示不出来？是什么原因？

.container{
padding:0 220px 0 200px;
overflow: hidden;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>圣杯布局</title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{min-width: 700px;}
.header,
        .footer{
border: 1px solid #333;
background: #ddd;
text-align: center;
height: 40px;
line-height: 40px;
}
.left,
        .middle,
        .right{
position: relative;
float: left;
min-height: 130px;
}
.container{
padding:0 220px 0 200px;
overflow: hidden;
}
.left{
margin-left: -100%;
left: -200px;
width: 200px;
background: #f00;
}
.right{
margin-left: -220px;
right: -220px;
width: 220px;
background: #30a457;
}
.middle{
width: 100%;
background: #1a5acd;
word-break: break-all;

}
.footer{
clear: both;
}
</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>

慕用4150088 2018-02-26

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

收起

4回答

好帮手慕糖 2018-02-27 09:33:26

你好，运行你的代码如下，doctype 声明时，所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子。在前端开发中有很多的规范与兼容性问题，重点在于了解与运用来解决实际的问题。现在随着现在浏览器版本的更新换代，建议：在开发过程中主要考虑主流的浏览器。

祝学习愉快~

收起回答

提问者慕用4150088 2018-02-27 09:08:22

我的代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    html,body {
        padding: 0;
        margin: 0;
    }
    body {
        min-width: 620px;
    }
    .header,.footer {
        background-color: #999;
        text-align: center;
        overflow: hidden;
    }
    .main {
        padding: 0 220px 0 200px;
        /* 这个我所知道的有两个作用：1清除浮动，2、解决IE7的兼容问题*/
        overflow: hidden;
        text-align: center;
    }
    .left,
    .center,
    .right {
        position: relative;
        float: left;
    }
    .center {
        width: 100%;
        background: pink;
    }
    .left {
        width: 200px;
        background-color: yellow;
        margin-left: -100%;
        left: -200px;
    }
    .right {
        width: 220px;
        background-color: green;
        margin-left: -220px;
        right: -220px;
    }
</style>
</head>
<body>
    <div class="header">
        <h1>header</h1>
    </div>
    <div class="main">
        <div class="center">
            <h1>center</h1>
            <p>这是中间部分</p>
        </div>
        <div class="left">
            <h1>left</h1>
            <p>这是左侧部分</p>
        </div>
        <div class="right">
            <h1>right</h1>
            <p>这是右侧部分</p>            
        </div>
    </div>
    <div class="footer">
        <h1>footer</h1>
    </div>
</body>
</html>

收起回答

好帮手慕糖 2018-02-26 19:05:31

你好，如下，图一是顶部的宽度，这个是正常页面的宽度，图二是主体部分的宽度，可以发现比实际的宽度要宽。可以测试查看下，这里也不是左边部分也不是消失了，而是在屏幕部分还有朝左的位置中，所以整体的宽度会显示有点宽，建议：可以把left元素的margin-left: -100%;值稍微调小点，例：-80%左右，是可以看到左边部分的。

图一：

图二：

这里跟文档声明也有一定的影响，可换为doctype 声明类型，发现宽度就可以正常。如下图：

图三：

图四：

ie 盒子模型的范围包括 margin、border、padding、content，和标准 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 pading。建议：可了简单解下ie盒子模型与标准盒子模型的区别来进行理解。

祝学习愉快~

收起回答

提问者慕用4150088 #1

你好，感谢老师的回答，在IE67的是ie盒子模型，所以padding被认为是宽度的一部分，所以ml时表现与其他浏览器不一致。可是你提到的‘这里跟文档声明也有一定的影响，可换为doctype 声明类型，发现宽度就可以正常。’这句话不是很明白，我在IE7中看到的是autoxauto。而我代码也是按照h5去声明文档的，效果也是左侧去了屏幕之外，按照调试的结果来看，仍然是因为ie盒子模型的原因。不知老师所说‘发现宽度就可以正常’是指什么？网上好像说IE7的overflow: hidden;不加定位是不起作用的，可我在容器里也没加定位，不知道为什么盒子模型好像就变成了标准盒子模型了。

2018-02-27 09:07:52