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

发布于
2016-05-13

更新于
2016-05-13

html——————————————————

<!DOCTYPE html>
<html>
    <head>
        <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;
}

图片描述

如图。
新手求指点

css html

阅读 3.8k

2 个回答

得票最新

无名小贝勒

5.7k156180

发布于
2016-05-13

✓ 已被采纳

        <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>

把main和right换个顺序就行了。

浏览器解析HTML文档是从上到下按顺序解析的，你原来的代码right本来就是一个block，设置右浮动不会对它前面的main有影响