• Css查漏补缺06-css布局


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>css布局</title>
        <!--    一、最基础的是流动布局,就是从上到下-->
    <!--    二、浮动-->
    <!--特点:-->
    <!--1、会脱离文档流-->
    <!--但是不会脱离文字流(脱离文档流就是不占着文档流的位置,-->
    <!--不脱离文字流就是还占着文字的位置,-->
    <!--这和float最初的目的相关,最初就 是做图文混排的) -->
    <!--2、浮动元素的宽高是由内容撑开, 不管是行级还是块级元素-->
    <!--如果设置了浮动属性,该元素就变成了具有inline- block属性的元素-->
    <!--(设置的宽高就可以生效了)-->
    <!--Q-->
    <!--3、如果浮动元素上边是一个没有浮动的块元素,|-->
    <!--则浮动元素不会超过这个块元素(像一堵墙)-->
    <!--4、多个元素设置浮动, 宽度足够的话, 会排在一行-->
    <!--5、文字环绕图片的效果-->
        <style>
            .box1{
                background-color:pink;
                height:100px;
                width:100px;
                float:right;
                }
            .box2{
                width:300px;
                border:5px solid yellow;
                /*清除浮动影响*/
                /*clear:both;*/
                /*float:left;*/
                }
            .box3{
                background-color:red;
                height:50px;
                width:100px;
                float:right;
                /*就是因为子容器内设置了浮动,这样的话脱离了基本的流动布局*/
                }
            .box4{
                clear:both;
                }
            .clearfix:after{
                content:'';
                display:block;
                clear:both;
                }
        </style>
    </head>
    <body>
    <div class="box1">
        <div>Everything</div>
    </div>
    
    <!--解决父容器高度坍塌的问题,加一个无意义的div框,设置clear,扩展高度,防止坍塌-->
    <div class="box2">
        <div class="box3">
            <p>Nothing</p>
        </div>
        <div class="box4"></div>
    </div>
    
    
    <!--第二种方法,设置clearfix选择器-->
    <div class="box2 clearfix">
        <div class="box3">
            <p>Nothing</p>
        </div>
    </div>
    
    
    
    
    
    </body>
    </html>
  • 相关阅读:
    黑产江湖
    FW/IDS/IPS/WAF等安全设备部署方式及优缺点
    SOAPA来临,SIEM时代终结?
    美国爱因斯坦计划4
    零基础如何学好安卓开发
    协同办公系统能为企业带来怎样的影响?
    阿里腾讯开撕,钉钉的广告打到腾讯的地盘了
    bug管理工具为开发者工作带来哪些改变?
    开发人员必备的几款bug管理工具
    教你玩转产品管理系统iClap(PC端功能篇)
  • 原文地址:https://www.cnblogs.com/cuijunfeng/p/13179760.html
一二三 - 开发者的网上家园