网页布局的应用（float或absolute）

1. 一个浮动（左浮动或右浮动）
2. 垂直环绕布局（float、clear）
3. 左右两列布局（float、absolute）
4. 三栏网页宽度自适应布局（float、absolute）

注意：网页设计中应该尽量避免使用浮动。避免使用absolute

1、一个浮动（左浮动或右浮动）

当一个div里面含有浮动元素和非浮动元素，IE6，7中的浮动元素会出现错位现象。

解决方案：  ①将浮动元素位于非浮动元素的前面。②非浮动设置为浮动元素。③浮动元素设置margin-top的负值。

<div class="title"><span>新闻列表</span><a href="javascript:;" class="r">更多</a> </div>

（在firefox、chrome、ie8+浏览器表现正常）

 

2、垂直环绕布局（float、clear）

.touxiang{ width:100px; height:100px; background-color: #dcdcdc; display: inline-block;}

<div class="fix">
      <span class="touxiang l">头像</span>        /*（左浮动）*/
      <span class="l cll">姓名</span> 　　　　　　 /*（左浮动，清除左浮动）*/
      <div class="bde" style="margin-left: 120px;">自我描述</div>    /*（没有浮动）*/
</div>

运行效果：

 

3、左右两列布局（float、absolute）

①当不要用到左栏收缩的时候同1、浮动div写在非浮动前面

用float布局：

/*.container { overflow:hidden; }*/ 用fix清除浮动
.aside{ float:left; width:300px; }
.right{ margin-left:310px; }

 

②需要用到左栏收缩（以高度不固定为例）

用absolute布局：  不推荐！！！！！！！！！！

 .header{ height: 70px;}
        .aside{
            width:300px; border-right: 1px solid #dedede;
            position: absolute; top: 0; left: 0; z-index: 999;
        }
        .right{ margin-left: 310px; /*注意：ie6出现错位现象，需添加 display: inline;或者改为padding-left。或者其它。。。 详见《css浏览器兼容集锦》*/}
        .toggle {
            width: 18px; height: 63px; line-height: 58px;
            vertical-align: middle;
            position: absolute; left: 300px; top: 60px; z-index: 1001;
            border-width: 1px; border-style: solid; border-color: #bbb #bbb #bbb #fff;
            border-top-right-radius: 3px; border-bottom-right-radius: 3px;
        }
/*三角形 注意另外两种方式实现，有什么区别。详细见《css三角形实现的几种方法的区别》*/
        .toggle em {
            height: 0;width: 0; display: inline-block; margin-left: 5px; overflow: hidden;
            border-style: dashed solid; border-width: 5px 5px 5px 0px;
            border-color: transparent #D0D4DA transparent transparent;
        }
        .toggle:hover em { border-color: transparent #52bf88 transparent transparent; }
        .shrink em {
            border-style: dashed solid; border-width: 5px 0px 5px 5px;
            border-color: transparent transparent transparent #D0D4DA;
        }
        .shrink:hover em { border-color: transparent transparent transparent #52bf88; }

<div class="fz">
    <div class="header bg-red">头部</div>
    <div id="container" class="mt10 rel">
        <a id="toggle" class="toggle" href="javascript:;">
            <em></em>
        </a>
        <div id="aside" class="aside l">
            <div style="height: 800px;">left</div>
        </div>
        <div id="right" class="right">right</div>
    </div>
</div>
js代码：
<script>
    var $aside = $("#aside");
    var $right=$("#right");
    var $toggle = $("#toggle");
     $(function(){
        leftToggle();
     })
     function leftToggle(){
         var flip = 0;
         $("#toggle").click(function () {
             if (flip % 2 == 0) {
                 contraction();
             }
             else {
                 expansion();
             }
             flip += 1;
         })
     }
    //收缩
    function contraction(){
        $aside.animate({ left: "-300px"}, 300, function () {
            $toggle.addClass("shrink");
        });
        $toggle.animate({left:"1px"},300,function(){
            $right.css("margin-left","1px");
        });                /*可优化，看怎样用一个animate实现*/
    }
    //展开
    function expansion(){
        $aside.animate({ left: "0" }, 300, function () {
            $toggle.removeClass("shrink");
        });
        $toggle.animate({left:"300px"},300,function(){
            $right.css("margin-left","310px");
        });              /*同上*/
    }
</script>

效果：（点击可伸缩）

 

4、三栏网页宽度自适应布局（float、absolute）

①绝对定位  不推荐！！！！！！！！！！！！

.left, .right { position: absolute; top: 0; width: 200px; height: 100%; background-color: #ff4136; }
.left { left: 0; }
.right { right: 0; }
.main { margin: 0 210px; background: yellowgreen; height: 100%;}

<div class="fz">
    <div class="left">left</div>
    <div class="main">main</div>
    <div class="right">right</div>
</div>

运行效果：

问题：不能设置“main”的最小宽度，当设置.main{min-width: 500px;} 缩小浏览器到最小宽度，main跟right区域重合。

 

②margin负值法

.main{ width: 100%; float: left;}
.main .body{ margin: 0 210px; background-color: yellowgreen;}
.left,.right{ width: 200px; float: left; background-color: #ff4136;}
.left{ margin-left: -100%;}
.right{ margin-left: -200px;}

<div class="fz fix">
    <div class="main">
        <div class="body">body</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

当main里面的body设置最小宽度同样出现“body“部分跟”right“部分重叠

③自身浮动法

.main { height: 100%; margin: 0 210px; background-color: yellowgreen; }
.left, .right { width: 200px; height: 100%; background-color: #ff4136; }
.left { float: left; }
.right { float: right; }

<div class="fz fix">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="main">main</div>
</div>

注意：div的顺序以及main部分不能用clear:both属性。设置main最小宽度同样不行