zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    常用地址
    三步搭建Spring Cloud 服务注册
    Java判断两个时间段是否有交集
    CentOS-7下安装docker
    linux 版菱形
    《少林问道》
    Linux下安装Nginx详细图解教程
    测试
    CentOS修改主机名和主机表
    虚拟机中CentOS配置静态网络
  • 原文地址:https://www.cnblogs.com/chenyingying0/p/12245980.html
Copyright © 2011-2022 走看看