在谈浮动

浮动只适合pc端

 margin 0 auto; //左右俩边自动推进.

 

<!DOCTYPE html>
<html lang="zh-cn">
<head>
　　　　<meta charset="utf-8">
　　　　<title>CSS传统布局[上]</title>
　　　　<link rel="stylesheet" type="text/css" href="style2.css">
</head>
<body>

　　<header>
　　　　header
　　</header>

　　<aside>
　　　　aside
　　</aside>

　　<section>
　　　　section
　　</section>

　　<footer>
　　　　footer
　　</footer>

</body>

 

@charset "utf-8";
body {
    margin: 0 auto;
    /*width: 960px;*/
    width: auto;
}
header {
    height: 120px;　　　　//因为body添加了宽度,这边自适应不用添加.
    background-color: olive;
}
aside {
    /*width: 200px;*/      //两种方式下面是流布局
    width: 20%;
    /*min-width: 120px;*/   
    height: 500px;   
    background-color: purple;
    float: left;        //添加folat是没有宽度的,所以要加width
}
section {
    /*width: 760px;*/
    width: 80%;
    height: 500px;
    background-color: maroon;
    float: right;  //如果不添加float 则会重叠, 所以要添加.
}
footer {
    height: 120px;
    background-color: gray;
    clear: both;   //  要么添加浮动,要么去用clear去除浮动
}

 

posted @ 2018-09-06 16:27  木丁  阅读(98)  评论(0)  编辑  收藏  举报