css之float样式

1. float：让标签浪起来，块级标签也可以堆叠。

可以实现让两个div把屏幕分成2块。让div飘起来。向左飘的话，就是向左靠齐。向右飘的话，就是向右靠齐。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="width:20%;background-color:red;float:left;">1</div>
    <div style="width:80%;background-color:black;float:left;">2</div>
</body>
</html>

运行结果：

2.写个例子：

<body style="margin:0 auto;">：顶部不留缝隙。margin:0 上下居中；auto左右自动居中。
height:30px： 父亲中没有定义多高，则孩子有多高，就把父亲撑得有多高。块级标签占100%是相对于父亲来说的。
width:96px：width是96，加上左右边框以后，其实是98px.

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            height:38px;
            background-color:#dddddd;
            line-height:38px;
        }
    </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>
    <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="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>

效果：

3. 儿子飘起来了，父亲把儿子拉回来。这样父亲的边框就能正常显示了。

<div style="clear:both;"></div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            height:38px;
            background-color:#dddddd;
            line-height:38px;
        }
    </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>
    <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="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>

运行结果：

4. 让左右两边留白的方法：

假设一行总长为1200px，先设置一个div=1200像素的，再在这个div里面定义一个div=900像素的。查看源码发现，此时里面的div是飘起来的，有float设置。为了让父亲管住儿子，需要<div style="clear:both">

margin:0 auto 让里面的div 居中于外面的div, 则“收藏本站，登录，注册等文字便会居中”，他们都写在里面的div里。

作业范例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
        height:38px;
        background-color:#dddddd;
        }
    </style>
</head>
<body style="margin:0 auto;">
    <div class="pg-header">
        <div style="width:980px;margin:0 auto;">
            <div style="float:left;line-height:38px;">收藏本站</div>
            <div style="float:right;line-height:38px;">
                <a>登录</a>
                <a>注册</a>
            </div>
            <div style="clear:both;"></div>
        </div>
    </div>
    <div>
        <div style="width:980;margin:0 auto;"></div>
            <div style="float:left;">logo</div>
            <div style="float:right;">
                <div style="height:50px;width:100px;background-color:#dddddd;">购物车</div>
            </div>
            <div style="clear:both"></div>
    </div>

    <div style="width:980;margin:0 auto;">
        <div style="width:980;margin:0 auto;background-color:#dddddd">123</div>
    </div>

<div style="width:300px;border:1px solid red;">
    <div style="width:96px;height:30px;border:1px solid green;float:left;">1</div>
    <div style="width:96px;height:30px;border:1px solid green;float:left;">2</div>
    <div style="width:96px;height:30px;border:1px solid green;float:left;">3</div>
    <div style="width:96px;height:30px;border:1px solid green;float:left;">4</div>
    <div style="width:96px;height:30px;border:1px solid green;float:left;">5</div>
    <div style="width:96px;height:30px;border:1px solid green;float:left;">6</div>
    <div style="clear:both"></div>
</div>
</body>
</html>

posted on 2017-08-22 10:46 momo8238 阅读(487) 评论(0) 收藏举报