为了去除浮动溢出，设置了container的overflow:hidden;最后为什么凸出来一块

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    /*此处写代码*/
    *{margin: 0;padding: 0;color: white;font-size: 18px;}
    /* body{min-width: ;} */
    div.header{
        height: 100px;
        width: 100%;
        background: black;
    }
    .logo{
        float: left;
        font-size: 0;
    }
     
    .nav{
        float: right;
    }
    .nav li{float: left;list-style: none;padding:0 20px;line-height: 100px;height: 100px;}
    .nav li:hover{color: orange;cursor: pointer;}
    .container{
        background: green;
        width: 100%;
        padding: 0 100px 0 100px;
        overflow: hidden;
    }
    .middle,.left,.right{
        /* position: relative; */
        float: left;
        min-height: 500px;
    }
    .middle{
        background: #FFC0CB;
        text-align: center;
        width: 100px;
        font-size: 0;
    }
    .middle img{vertical-align: middle;}
    /* .middle img{position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;} */
 
    .left{
        width: 200px;
        background: #FFEFDB;
    }
    .right{
        width: 200px;
        background: #ADD8E6;
    }
    .footer{height: 100px;width: 100%;background: black;}
    .footer ul{height: 100px;line-height: 100px;margin:0 auto;width: 60%;}
    .footer ul li{list-style: none;float: left;padding:0 20px 0 20px;}
     
  </style>
</head>
<body>
  <!-- 此处写代码 -->
    <div class="header">
        <div class="logo">
            <img src="http://img1.sycdn.imooc.com/climg//590037f600016ce303000100.png" alt="">
        </div>
        <ul class="nav">
                <li>课程</li>
                <li>职业路径</li>
                <li>实战</li>
                <li>猿问</li>
                <li>手记</li>
        </ul>
    </div>
    <div class="container">
        <div class="middle">
            <!-- <img src="http://img1.sycdn.imooc.com/climg//590037e00001fab706000400.jpg" alt=""> -->
        </div>
        <!-- <div class="left"></div>
        <div class="right"></div> -->
    </div>
    <div class="footer">
        <ul>
            <li>网站首页</li>
            <li>企业合作</li>
            <li>人才招聘</li>
            <li>联系我们</li>
            <li>常见问题</li>
            <li>友情链接</li>
        </ul>
    </div>
</body>
</html>

慕桂英6225613 2019-10-26

源自：CSS网页布局基础 3-3 编程练习

收起

2回答

樱桃小胖子回答被采纳获得+3积分 2019-10-27 17:02:59

因为padding的左右值和left、right的宽度不一致导致的，建议修改如下：

希望可以帮到你！

收起回答

慕桂英6225613 提问者 #1

嗯，谢谢老师，可是为啥不能设置.container的宽度为100%呢，不是.header也设置了，现在才发现老师的代码里也没设置

2019-10-27 17:07:57
樱桃小胖子回复提问者慕桂英6225613 #2

.container设置100%以后，再加上left移出来+right移出来，整体宽度大于视窗的100%可视区域啦，所以就会出现滚动条。而.container不设置宽度100%的时候，.container的宽度是有里面的子元素撑开的，这样就不会超出了

2019-10-27 17:10:03
慕桂英6225613 提问者回复樱桃小胖子 #3

大概了解了，就是container被撑大了？

2019-10-27 19:48:23