zoukankan      html  css  js  c++  java
  • 前端老司机常用的方法CSS如何清除浮动?清除浮动的几种方式

    在前端开发过程中,我们经常会使用到浮动(float),这个我们即爱又恨的属性。爱,是因为通过浮动,我们能很方便地进行布局;恨,是因为浮动之后遗留下来太多的问题需要解决。下面本篇文章给大家介绍CSS清除浮动的几种方法,希望对大家有所帮助。

    方法1:使用带clear属性的空元素

    使用空标签清除浮动:在需要清除浮动的父级元素内部的所有浮动元素后添加一个空标签(理论上可以是任何标签,但常用<div>和<p>)清除浮动,并为其定义CSS代码clear:both。

    代码实例:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                .demo{
                     500px;
                    margin: 50px auto;
                    background-color: #CCCCCC;
                }
                .left{
                     100px;
                    height: 100px;
                    float: left;
                    background-color: #21B4BB;
                }
                .right{
                     100px;
                    height: 50px;
                    float: right;
                    background-color: #21B4BB;
                }
                .clear{
                    clear:both;
                }
            </style>
        </head>
        <body>
            <div>
                <div>left</div>
                <div>right</div>
                <div></div>
            </div>
        </body>
    </html>

    优点:简单,代码少,浏览器兼容性好。

    缺点:需要添加大量无语义的html元素,代码不够优雅,后期不容易维护。

    方法2:使用CSS的overflow属性

    使用overflow清除浮动:只需在需要清除浮动的元素中定义CSS代码overflow:auto或overflow:hidden即可。

    代码实例:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                .demo{
                     500px;
                    margin: 50px auto;
                    background-color: #CCCCCC;
                    overflow:hidden
                }
                .left{
                     100px;
                    height: 100px;
                    float: left;
                    background-color: #21B4BB;
                }
                .right{
                     100px;
                    height: 50px;
                    float: right;
                    background-color: #21B4BB;
                }
            </style>
        </head>
        <body>
            <div>
                <div>left</div>
                <div>right</div>
            </div>
        </body>
    </html>

    优点:不存在结构和语义化问题,代码量极少

    缺点:内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素

    方法3:使用CSS的:after伪元素

    对父元素使用:after伪元素,设置display:table。

    display:table 使生成的元素以块级表格显示,占满剩余空间。

    通过content: " "生成内容作为最后一个元素,至于content里面是什么都是可以的,CSS经典的是 content:".",有些版本可能content里面内容为空。

    代码实例:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                .demo{
                     500px;
                    margin: 50px auto;
                    background-color: #CCCCCC;
                    *zoom: 1;
                }
                .demo:after { 
                    content: " ";
                    display: table; 
                    clear: both;  
                }  
                .left{
                     100px;
                    height: 100px;
                    float: left;
                    background-color: #21B4BB;
                }
                .right{
                     100px;
                    height: 50px;
                    float: right;
                    background-color: #21B4BB;
                }
            </style>
        </head>
        <body>
            <div>
                <div>left</div>
                <div>right</div>
            </div>
        </body>
    </html>

    缺点:适合现代浏览器,不支持IE6/7,*zoom: 1就是为了兼容IE6/7

  • 相关阅读:
    86. Partition List
    328. Odd Even Linked List
    19. Remove Nth Node From End of List(移除倒数第N的结点, 快慢指针)
    24. Swap Nodes in Pairs
    2. Add Two Numbers(2个链表相加)
    92. Reverse Linked List II(链表部分反转)
    109. Convert Sorted List to Binary Search Tree
    138. Copy List with Random Pointer
    为Unity的新版ugui的Prefab生成预览图
    ArcEngine生成矩形缓冲区
  • 原文地址:https://www.cnblogs.com/ypppt/p/12893575.html
Copyright © 2011-2022 走看看