在谈浮动

Posted 2021-01-04 ningjie

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在谈浮动相关的知识，希望对你有一定的参考价值。

浮动只适合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去除浮动

}

以上是关于在谈浮动的主要内容，如果未能解决你的问题，请参考以下文章