zoukankan      html  css  js  c++  java
  • 清浮动原理及方式

    浮动清理的必要性

    当父盒子不浮动,子盒子浮动,子盒子会脱离父盒子的束缚,也就是造成父盒子塌陷,

    子盒子不浮动时

    <!DOCTYPE html>
    <html>
    <head>
    <title>sss</title>


    <style type="text/css">
    .fd{
    background-color: red;
    300px;
    /*height: 300px;*/
    }
    .cd{
    background-color: yellow;
    height: 200px;
    200px;
    /* float: right;*/
    }
    </style>
    </head>
    <body>
    <div class="fd">
    <div class="cd">
    子盒子
    </div>

    </div>

    </body>
    </html>

    如图

    子元素浮动后,父元素默认为0,即

    .cd{
    background-color: yellow;
    height: 200px;
    200px;
    float: right;
    }

    如图

    解决方式有这么几个:

    方法1,父盒子定义height,适用于父盒子固定,原理:这样父盒子自己设置高度,就不用子盒子撑开了,适用于父级元素已知的情况

    .fd{
    background-color: red;
    300px;
    height: 300px;
    }

    如图

    方法2.额外标签法,在子元素后面加空div,并设置样式清理两侧浮动。原理:空div设置两侧清浮动,会另起一行,撑开父盒子,而空div高度为0,遂产生如图效果。缺点是增加多余标签。

    html部分

    <div class="fd">
    <div class="cd">
    小明学长
    </div>

    <div class="dd"></div>
    </div>

    css部分

    .dd{
    clear: both;
    }

    方法3.给父级添加样式,

    <div class="fd clearfix">
    <div class="cd">
    小明学长
    </div>

    </div>

    .clearfix:after {
    content: "."; //在父盒子内部,子盒子后面添加一个盒,也可以为"",也就是为空
    display: block; //设置为块状,不然不会另一一行
    clear: both; //另起一行后,清理两侧浮动,撑起父盒子。这三行就够了,后面的内容使其更完善
    visibility: hidden;
    height: 0;
    font-size:0;
    }

    .clearfix{
    zoom:1

    }//在IE6, 7下zoom: 1会触发hasLayout,从而使元素闭合内部的浮动

    原理和2类似,只是不需要添加div标签,利用:after在子元素后面添加一个空块盒。

    方法4.父盒子添加样式

    .clearfix{
    zoom:1;//兼容低版本ie
    overflow: hidden;//是为了给予高度,并不是真正的防止溢出。
    }

    另外父元素浮动或者position设为absolute也可以,但是下方正常流会上浮,方法是在父级下方加空div,清理两侧浮动

  • 相关阅读:
    ie6内存泄漏问题的解决
    精简版拖动
    【转】在ASP.Net中写系统日志
    转 集中遍历遍历datatable的方法
    水晶报表字段为空时设置默认值
    数据库一种IN查询
    两种获得路径的测试
    整理——ASP.net UTF8支持
    Subversion svnserve 服务配置 整理
    [转自CSDN] SQL基础> 约束(CONSTRAINT)
  • 原文地址:https://www.cnblogs.com/cumting/p/6787124.html
Copyright © 2011-2022 走看看