CSS基础（十二）-- Float样式之标签两种样式叠加

随笔记录方便自己和同路人查阅，学习CSS时最好先学会HTML。

#------------------------------------------------我是可耻的分割线-------------------------------------------

我们想把一个div标签涂成两个颜色，根据以前只是可以使用百分比显示比例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input系列</title>
</head>
<body>
    <div style="width:30%;background-color:red;">1</div>
    <div style="width:70%;background-color:black;">2</div>
</body>
</html>

效果：

为什么会这样呢？因为div是块级标签，默认只要有div就会换行，想要让两个颜色拼接起来需要使用float样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input系列</title>
</head>
<body>
    <div style="width:30%;background-color:red;float:left;">1</div>
    <div style="width:70%;background-color:black;float:right;">2</div>
</body>
</html>

效果：

Float是漂浮，float-left是向左飘，float-right是向右飘，只要百分比不超过100%就会拼接在一起，如果超过就会换行。

注意：想要拼接两个标签必须都要float，两个标签占比不能超过100%。这个必须会。

做一个简单网页（部分）

首先是首页的灰色标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input系列</title>
    <style>
        .pg-header{
            height:30px;
            background-color:#999;
            line-height:30px;
        }
    </style>
</head>
<body style="margin:0 auto;">
    <div class="pg-header">
        <div style="float:left;">收藏本站</div>
        <div style="float:right;">登入 注册</div>
    </div>
    <div style="width:300px;border:1px solid red;">
        <div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
        <div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
        <div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
        <div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
    </div>
</body>
</html>

效果：

优化一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input系列</title>
    <style>
        .pg-header{
            height:30px;
            background-color:#999;
            line-height:30px;
        }
    </style>
</head>
<body style="margin:0 auto;">
    <div class="pg-header">
        <div style="float:left;">收藏本站</div>
        <div style="float:right;">登入 注册</div>
    </div>
    <div style="width:300px;border:1px solid red;">
        <div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
        <div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
        <div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
        <div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
        <div style="clear:both"></div>
    </div>
</body>
</html>

效果：

<div style="clear:both"></div>相当于把子集变成和父级一样的格式

优化首页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input系列</title>
    <style>
        .pg-header{
            height:30px;
            background-color:#999;
            line-height:30px;
            width:980px;
            margin:0 auto;
        }
    </style>
</head>
<body style="margin:0 auto;">
    <div class="pg-header">
        <div style="float:left;">收藏本站</div>
        <div style="float:right;">
            <a>登入<a>
            <a>注册</a>
        </div>
    </div>
</body>
</html>