網頁佈局的應用（float或absolute）

1. 一個浮動（左浮動或右浮動）
2. 垂直環繞佈局（float、clear）
3. 左右兩列布局（float、absolute）
4. 三欄網頁寬度自適應佈局（float、absolute）

注意：網頁設計中應該儘可能避免使用浮動。避免使用absolute

一、一個浮動（左浮動或右浮動）

當一個div裏面含有浮動元素和非浮動元素，IE6，7中的浮動元素會出現錯位現象。

解決方案：  ①將浮動元素位於非浮動元素的前面。②非浮動設置爲浮動元素。③浮動元素設置margin-top的負值。

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

（在firefox、chrome、ie8+瀏覽器表現正常）

 

二、垂直環繞佈局（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>

運行效果：

 

三、左右兩列布局（float、absolute）

①當不要用到左欄收縮的時候同一、浮動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>

效果：（點擊可伸縮）

 

四、三欄網頁寬度自適應佈局（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最小寬度一樣不行