1.文档流（标准流）、浮动布局

最新推荐文章于 2023-12-08 23:32:02 发布

jojo999888

最新推荐文章于 2023-12-08 23:32:02 发布

阅读量550

点赞数

分类专栏： css html

本文链接：https://blog.csdn.net/gc_20160403/article/details/75546784

版权

css 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

文档流概念

元素自上而下，自左而右，块元素独占一行，行内元素在一行显示，碰到父元素的边框换行。

浮动布局

（大盒子在同一行显示）
float: left | right

特点：

元素浮动后不占据原来的位置（脱离标准流）
浮动的盒子在一行显示
行内元素浮动之后转换为行内块元素。（不推荐使用，转行内元素最好使用display:inline-block;）

浮动作用

文本绕图
制作导航
网页布局

制作导航

<html>
<head>
<title>格式清零</title>
<style type="text/css">
    body,ul,li{
        margin:0;
        padding:0;
    }
    li{
        list-style:none;
    }
    .nav{
        height:55px;
        background:url("head_bg.jpg");
        margin-top:30px;
        border-top:1px solid #666;
    .nav-con{
        width:1000px;
        margin:0 auto;
        }
    .nav-con ul li{
        float:left;
        background:url("li.png") no-repeat right;
        height:55px;
        padding:0 20px;
        }
    .nav-con ul li a{
        display:inline-block;
        height:55px;
        font:18px/55px 微软雅黑；
        text-decoration:none;
        color:#000;
        }
    .nav-con ul li a:hover{
        color:green;
        }


</style>
</head>
<body>
    <div class="nav">
        <div class="nav-con">
            <ul>
                <li><a href="#">智能手机</a></li>
                <li><a href="#">智能手机</a></li>
                <li><a href="#">智能手机</a></li>
            </ul>
        </div>
    </div>
</body>
</html>