float浮动以及案例演示

浮动元素会影响后边的元素，但不会影响前边的元素

清除浮动：

方法一：在浮动元素后面添加一个空元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width:100px;
            height:100px;
            background:#abcdef;
            float:left;
            border:1px solid;
        }
        .clear{
            clear:both;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <div class="clear"></div>
    <div class="last">
        last~
    </div>
</body>
</html>

方法二：

给浮动元素的父元素添加overflow:hidden;

再添加zoom:1; 兼容IE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width:100px;
            height:100px;
            background:#abcdef;
            float:left;
            border:1px solid;
        }
        .wrap{
            overflow: hidden;
            zoom:1;    
        }
        .clear{
            clear:both;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <div class="last">
        last~
    </div>
</body>
</html>

方法三：

使用css3的:after伪元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .clearfix{
            zoom:1;/*兼容IE*/
        }
        .clearfix:after{
            content:'';
            display: block;
            height:0;
            visibility: hidden;
            clear:both;
        }
        .box{
            width:100px;
            height:100px;
            background:#abcdef;
            float:left;
            border:1px solid;
        }
    </style>
</head>
<body>
    <div class="wrap clearfix">
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <div class="last">
        last~
    </div>
</body>
</html>

float完成导航案例演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*重置样式*/
        *{margin:0;padding:0;}
        a{text-decoration: none;}
        ul{list-style:none;}
        /*基本样式*/
        .header{
            width:1120px;
            background:#ccc;
            margin:0 auto;
            overflow: hidden;
            zoom:1;
            padding:0 40px;
        }
        .logo{
            float:left;
            width:100px;
            height:68px;
        }
        .nav{
            float:right;
            overflow: hidden;
            zoom:1;
        }
        .nav li{
            float: left;
            margin-right:20px;
            
        }
        .nav li a{
            color:#333;
            display: block;
            height:68px;
            line-height:68px;
        }
        .nav li a:hover{
            color:#fff;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="logo">
            <a href="#"><img src="cat-little.jpg" alt="logo"></a>
        </div>
        <ul class="nav">
            <li><a href="#">导航1</a></li>
            <li><a href="#">导航2</a></li>
            <li><a href="#">导航3</a></li>
            <li><a href="#">导航4</a></li>
            <li><a href="#">导航5</a></li>
        </ul>

    </div>
</body>
</html>

相关阅读:
Django同步数据库（/manage.py makemigrations) 报错
 python中global和nonlocal用法的详细说明
 linux系统下载pycharm
第一次博客作业
 结对编程作业
 团队介绍与选题报告
 FTP的时间为什么比系统时间晚了八个小时？
新的部落格
 Enter键提交表单
 Android动画RotateAnimation(fromDegrees, toDegrees, pivotX,pivotY)参数
原文地址：https://www.cnblogs.com/chenyingying0/p/12245980.html