浏览器缩小 css布局乱了ok

ps:下面呢些都是我看的别人的未做尝试，其实我本意是：我写了一个静态网页 ，但是一旦界面缩小所有框架都浮动了，后来才搜的去浮动，但是尝试没有效果（可能是我position用的很多吧！），最后只是全局设置了

 .container{
width:100%;
min-width:1280px;
}

这样就好了！！！

界面就只显示界面大小的部分，其余就未显示，也是不错的。（不过我宽度基本都用的%）

还有我中间遇见的小问题：就是有的时候加float的重要性：不加浮动有的时候下面的内容就会跑到上面来，填充满才为止，加了浮动就解决了。

  |

|

|

后续修改：

最近有网页内部的一些部分缩小时候出现跑到下面，所以尝试了positionLrelative;overflow:hidden;均木有效果，

后来还是想到设置宽度：具体是1.首先设置浮动部分的父元素的宽度（百分比，px都可）

                                                 2.再设置浮动部分的宽度（%）就ok了！

“浏览器缩小 css布局乱了”，出现这种情况一般是这种情况：给元素设置了浮动，但没有清除浮动，比如

<style type="text/css">
    .f-left {
        float:left;
        width:500px;
        height:200px;
        border: 1px solid #4c9fff;
    }
    .f-right {
        float:right;
        width:500px;
        height:200px;
        border: 1px solid #4c9fff;
    }
</style>

<div class="f-left"></div>
<div class="f-right"></div>

当浏览器缩小时，到了一定程度(此处小于1000px时)，因为宽度不够两个div的总宽度，
这时右边那个div就会跑到下面去，类似的，当一个页面用了过多的浮动时，将浏览器缩小，
则里面的内容会错乱，甚至一塌糊涂，所以如果设置了浮动一定要记得清浮动。
清除浮动的代码不一，我这里提供一个，代码如下：

.clearfix{zoom:1;}
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    font-size: 0;
    clear: both;
    overflow: hidden;
    visibility: hidden;
}

使用的时候只要在设置了浮动的直接父标签上添加清除浮动的样式即可,但还有一点一定要记住，就是不要再使用width固定值，而应改成百分比。
具体代码如下：
    .f-left {
        float:left;
        width:50%;
        height:200px;
        border: 1px solid #4c9fff;
    }
    .f-right {
        float:right;
        width:48%;
        height:200px;
        border: 1px solid #4c9fff;
    }
<div class="clearfix">
    <div class="float"></div>
    <div class="float"></div>
</div>

这样就不会有问题啦。

相关的一些文章：http://www.csdn123.com/html/20130206/33/9cab6ac53ef30e4b33a4f5eff11c788a.htm

http://www.cnblogs.com/top5/archive/2011/07/11/2103343.html