用float进行三栏布局为什么最后一栏会下沉？

        <meta charset="UTF-8">
        <title></title>
        <link type="text/css" rel="stylesheet" href="new_file.css"/>
    </head>
    <body>
        <div id="wrap">
            <div id="left">
                <img src="10361578_222507517000_2.jpg" />
                <p>Poi$on</p>
            </div>
            <div id="main">
                美国街头品牌 SSUR 人气支线 SSUR*PLUS 日前释出了春夏系列，以 “Mischief & American Dream” 为主题，大玩恶搞风格和美式精神，将“I DON`T GIVE A F*CK”、“RICH OWNERS”、“自由国”、“美国鹰”等标语和图案印制于 Tee、背心、短裤之上，并大胆运用条纹、迷彩、拼接等设计元素，极具街头态度。据悉，所有新品将于近期上架 SSUR 上海门店和线上店铺，感兴趣的朋友不妨提前做好准备。
            </div>
            <div id="right">
                <img src="10361578_222507517000_2.jpg" />
                <img src="10361578_222507517000_2.jpg" />
                <img src="10361578_222507517000_2.jpg" />
                <img src="10361578_222507517000_2.jpg" />
            </div>
        </div>
    </body>
</html>

css——————————————————

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    padding: 20px;
}
#wrap,#left,#right,#main{
    border: 1px solid #999;
    padding: 20px;
}
#wrap{
    overflow: auto;
    background: #eee;
    min-width: 600px;
    margin: 0 auto;
}
#left{
    float: left;
    width: 200px;
    background: #fff;
}
#right{
    float: right;
    width: 120px;
    background: #fff;
}
#main{
    margin-left: 220px;
    margin-right: 140px ;
    background: #fff;
}

<div id="wrap"> <div id="left"> <img src="10361578_222507517000_2.jpg" /> <p>Poi$on</p> </div> <div id="right"> <img src="10361578_222507517000_2.jpg" /> <img src="10361578_222507517000_2.jpg" /> <img src="10361578_222507517000_2.jpg" /> <img src="10361578_222507517000_2.jpg" /> </div> <div id="main"> 美国街头品牌 SSUR 人气支线 SSUR*PLUS 日前释出了春夏系列，以 “Mischief & American Dream” 为主题，大玩恶搞风格和美式精神，将“I DON`T GIVE A F*CK”、“RICH OWNERS”、“自由国”、“美国鹰”等标语和图案印制于 Tee、背心、短裤之上，并大胆运用条纹、迷彩、拼接等设计元素，极具街头态度。据悉，所有新品将于近期上架 SSUR 上海门店和线上店铺，感兴趣的朋友不妨提前做好准备。 </div> </div>

用float进行三栏布局为什么最后一栏会下沉？

相关文章

相关电子书