• CSS 去除浮动的方法


    随笔记一下 一个浮动的元素 如果没有设置宽高 将会自动收缩为文字的宽高 脱标 贴边 字围 收缩

    浮动有开始 就要有清除

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style type="text/css">
            li {
                float: left;
                width: 100px;
                height: 40px;
                background-color: gold;
            }
        </style>
    </head>
    <body>
        <div>
                <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>JS</li>
                <li>HTML5</li>
                <li>OC</li>
            </ul>
        </div>
        <div>
            <ul>
                <li>swift</li>
                <li>java</li>
                <li>PHP</li>
            </ul>
        </div>
        
    </body>
    </html>

    效果

    可以看到div作为一个块级元素 竟然没有两行显示 第二个div中的li去贴第一个div的边了

    可以看到浮动和浮动之间还是有关系的(第二个div中的li去贴第一个div的边了)

    原因就是div没有设置高度 不能给自己浮动的‘孩子们’一个容器

    所以一个元素要浮动 那么他的父亲一定要有高度.

    那么可以知道,清除浮动的第一个方法就是 盒子有高度(可以清除浮动与浮动之间的影响) 即给浮动的元素的祖先加高度

    只要浮动在一个有高度的盒子中,那么这个浮动就不会影响后面的浮动元素

    网页制作中,高度height很少出现,因为能被内容撑高!

    清除浮动方法二

    clear both 分为 clear:left clear:right

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style type="text/css">
            li {
                float: left;
                width: 100px;
                height: 40px;
                background-color: gold;
                list-style: none;
            }
            .box1 {
                clear: both;
            }
        </style>
    </head>
    <body>
        <div>
                <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>JS</li>
                <li>HTML5</li>
                <li>OC</li>
            </ul>
        </div>
        <div class="box1">
            <ul>
                <li>swift</li>
                <li>java</li>
                <li>PHP</li>
            </ul>
        </div>
        
    </body>
    </html>

    效果 

    可以看到清除了浮动(两个浮动之间的影响被清除了)

    但是这个方法有一个致命的缺陷 margin在视觉上失效了

    清除浮动方法三

    隔墙法(外墙)

    也是使用clear both 但是位置有变化

    <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>Document</title>
            <style type="text/css">
           * {
              margin:0px;
              padding:0px;
           }
    li { float: left; width: 100px; height: 40px; background-color: gold; list-style: none; text-align: center; } .cl { clear: both; } /* .h { height: 0px; } */ </style> </head> <body> <div class="box1"> <ul> <li>HTML</li> <li>CSS</li> <li>JS</li> <li>HTML5</li> <li>OC</li> </ul> </div> <div class="cl h"></div> <div class="box2"> <ul> <li>swift</li> <li>java</li> <li>PHP</li> </ul> </div> </body> </html>

    注意clear both的位置,.h可以控制间距

    内墙法

    <style type="text/css">
            * {
                margin: 0px;
                padding: 0px;
            }
            li {
                float: left;
                width: 100px;
                height: 40px;
                background-color: gold;
                list-style: none;
                text-align: center;
            }
            .cl {
                clear: both;
            }
            .h {
                height: 10px;
            }
           
     </style>
    
    <body>
        <div class="box1">
            <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>JS</li>
                <li>HTML5</li>
                <li>OC</li>
            </ul>
            <div class="cl h"></div>
        </div>
        
        <div class="box2">
            <ul>
                <li>swift</li>
                <li>java</li>
                <li>PHP</li>
            </ul>
        </div>
        
    </body>

    一个父亲是不能被浮动的儿子撑出高度的

    内墙法比外墙法的好处是 可以撑出父亲的高度 

    overflow:hidden

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            div.news {
                width: 500px;
                height: 300px;
                border: 1px solid blue;
                margin: 100px;
            }
            ul {
                list-style: none;
            }
            li {
                border-bottom: 1px dashed gray;
                /* 和加内墙的效果一样 可取其中一种 */
                overflow: hidden;
            }
            .news ul li span.title {
                float: left;
            }
            .news ul li span.date {
                float: left;
                margin-left: 35px;
            }
            /* .cl {
                clear: both;
            }
            .h {
                height: 5px;
            } */
    
    
        </style>
    </head>
    <body>
        <div class="news">
            <ul>
                <li>
                    <span class="title">嘻嘻嘻嘻嘻嘻嘻</span>
                    <span class="date">2019-07-06</span>
                    <!-- <div class="cl h"></div> -->
                </li>
                <li>
                    <span class="title">嘻嘻嘻嘻嘻嘻嘻</span>
                    <span class="date">2019-07-06</span>
                    <!-- <div class="cl h"></div> -->
                </li>
                <li>
                    <span class="title">嘻嘻嘻嘻嘻嘻嘻</span>
                    <span class="date">2019-07-06</span>
                </li>
            </ul>
        </div>
        
    </body>
    </html>

    https://www.jianshu.com/p/7e04ed3f4bea

    总结

    1 浮动的元素只能被有高度的盒子关注,也就是说,如果盒子内部有浮动,那么这个盒子有高,那么浮动不会相互影响。但是工作中我们绝不护给所有的饿盒子加高度,因为麻烦,并且不能适应页面的快速变化。

    2.最简单的清除盒子的方法 给盒子添加 clear both 表示盒子内部的元素不受其他盒子的影响 但是margin 会失效 两个盒子之间会没有间隙

    3.隔墙法(外墙) 和 (内墙)

    内墙法的有点 不仅可以清除浮动间的影响,并且能撑出所在盒子的高度

    4. overflow:hidden 这个属性的本意是将所有溢出盒子的内容隐藏掉,但是 我们发现这个东西可以用于浮动的清除,我们知道一个父亲不能被浮动的儿子撑出高度,但是加了这个属性,父亲就会被浮动的儿子撑出高度。能让margin生效

  • 相关阅读:
    JS数据类型
    javaws运行jnlp文件被阻止(安全级别过高)
    linux sysctl的使用
    面向对象-特性property
    面向对象-封装
    面向对象-鸭子类型
    面向对象-多态与多态性
    面向对象-抽象类
    面向对象-组合
    面向对象-在子类使用父类的对象或属性
  • 原文地址:https://www.cnblogs.com/huanying2000/p/11135910.html
Copyright © 2020-2023  润新知