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高度自适应问题。

  • 相关阅读:
    HTML中一定会常用的标签和标签属性(这是网页构成的重要元素
    HTML(超文本语言)
    SQL SERVER中视图、事务
    important覆盖行内样式
    线性渐变
    「JavaScript面向对象编程指南」闭包
    移动端文章图片大小限制
    Vue中ajax返回的结果赋值
    「JavaScript面向对象编程指南」基础
    JS媒体查询
  • 原文地址:https://www.cnblogs.com/zq20/p/4198472.html
Copyright © 2011-2022 走看看