zoukankan      html  css  js  c++  java
  • div+css之清除浮动

    当元素有浮动属性时,会对其父元素或后面的元素产生影响,
    会出现一个布局错乱的现象,可以通过清除浮动的方法来解决浮动的影响。

    浮动的清理(clear):

    值:
    none:默认值。允许两边都可以有浮动对象;
    left:不允许左边有浮动对象;
    right:不允许右边有浮动对象;
    both:左右两侧不允许有浮动对象。

    清除浮动的方法:
    1.额外标签法
    这种方法应该是最简单的一种了,w3c建议在容器的末尾增加一个“clear:both"的元素
    强迫容器适应它的高度以便装下所有的float元素。
    <div id="main">
       <div id="left"></div>
       <div id="right"></div>
       <div class="clear"></div>
    </div>
    <div id="footer"></div>

    .clear{clear:both;}

    2.父元素添加overflow:hidden;
    注:如果子元素使用了定位布局,就会很难实现。

    3.利用伪对象after方法
    定义一个类,使用伪对象after,控制浮动元素的影响。
    网上最流行的清除浮动代码:
    .clearFix:after{
     clear:both;
     display:block;
     visibility:hidden;
     height:0;
     line-height:0;
     content:'';

    }
    .clearFix{zoom:1;} /*解决ie6/7兼容问题*/


    css溢出的使用
    设置对象的内容超过其指定高度及宽度时,如何管理内容。
    overflow:visible【默认值,不剪切内容也不添加滚动条】
    auto【在必需时,对象内容才会被剪切或添加滚动条】
    hidden【不显示超过对象尺寸的内容】
    scroll【总是显示滚动条】

    zoom属性:只有ie内核的浏览器支持,缩放比例。
    设置或检索对象的缩放比例。
    语法:normal【默认值,使用对象的实际尺寸】;number【百分数|无符号浮点实数。浮点实数
    为1.0或百分数为100%时相当于此属性的normal值
    zoom:1解决ie6高度自适应问题。

  • 相关阅读:
    13.kubernetes之pv,pvc,configmap(带补充实例)
    1.docker 数据卷的备份和恢复(非大数据量)
    mysql基础 事务的认识和使用
    jdbc基础 (四) 批处理
    jdbc基础 (三) 大文本、二进制数据处理
    mysql使用基础 sql语句(一)
    linux下安装openssh-server
    jdbc基础 (二) 通过properties配置文件连接数据库
    jdbc基础 (一) MySQL的简单使用
    windows API 开发飞机订票系统 图形化界面 (四)
  • 原文地址:https://www.cnblogs.com/ahwu/p/3927786.html
Copyright © 2011-2022 走看看