zoukankan      html  css  js  c++  java
  • 清除浮动的常用方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <title>无标题文档</title>
        <link rel="shortcut icon" href="img/icoTest.ico">
    </head>
    <style type="text/css">
        /*公共样式*/
        ul,li,div{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        .floatLeft{
            float: left;
        }
        .floatRight{
            float: right;
        }
        /*方法一:设置overflow清除浮动(同理可设置父级元素高度)*/
        /*
        .overFlow{
            overflow: auto;
            zoom:1;//处理兼容性
        }
        */
    
        /*方法二:添加元素清除浮动*/
        /*
        .floatClear{
            clear: both;
        }
        */
    
        /*方法三:通过伪类*/
        .container{zoom: 1;}/*处理兼容性问题*/
        .container :after{
            display: block;
            clear: both;
            width: 0;
            height: 0;
            content: "";
            visibility: hidden;
        }
        /*样式*/
        .container{
            position: relative;
            width: 302px;
            height: 500px;
            margin: auto;
        }
        .container .nav{
            width:212px;
        }
    
        .container .nav li{
            width: 90px;
            height: 30px;
            border: 1px solid #ccc;
        }
        
        .content{
            z-index: 1;
            width: 210px;
            height: 300px;
            border: 1px solid #ccc;
        }
    </style>
    <body>
        <div class="container">
            <ul class="nav overFlow">
                <li class="floatLeft"></li>
                <li class="floatRight"></li>
            </ul>
            <!--方法二:清除浮动-->
            <!--
            <div class="floatClear"></div>
            -->
            <div class="content"></div>
        </div>
    </body>
    <html>
  • 相关阅读:
    uva 12034 Race
    计算机基础之计算机硬件软件数据结构
    Project Perfect让Swift在server端跑起来-Perfect in Visual Studio Code (四)
    关于自己定义转场动画,我都告诉你。
    Shell编程入门
    CODEVS 1029 遍历问题
    【VBA研究】工作表自己主动筛选模式检測
    卸载MySQL 5.0
    操作系统(二)进程控制
    前端面试题
  • 原文地址:https://www.cnblogs.com/supe/p/6359626.html
Copyright © 2011-2022 走看看