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

    一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了。


    浮动产生样式效果截图

    本来两个黑色对象盒子是在红色盒子内,因为对两个黑色盒子使用了float浮动,所以两个黑色盒子产生了浮动,导致红色盒子不能撑开,这样浮动就产生了。

    简单地说,浮动是因为使用了float:leftfloat:right或两者都是有了而产生的浮动。

    二、浮动产生负作用   -   TOP

    1、背景不能显示
    由于浮动产生,如果对父级设置了(CSS background背景CSS背景颜色CSS背景图片,而父级不能被撑开,所以导致CSS背景不能显示。

    2、边框不能撑开
    如上图中,如果父级设置了CSS边框属性(css border),由于子级里使用了float属性,产生浮动,父级不能被撑开,导致边框不能随内容而被撑开。

    3、margin padding设置值不能正确显示
    由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

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

    浮动的清理(clear):

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

    清除浮动的方法:

    1、对父级设置适合CSS高度
    对父级设置适合高度样式清除浮动.

    2.额外标签法
    这种方法应该是最简单的一种了,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;}

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

    4.利用伪对象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高度自适应问题。

  • 相关阅读:
    POJ 1470 -- Closest Common Ancestors
    js跳转链接的几种方式
    vue移动端项目经验(二)
    css项目知识小汇总
    浏览器滚动条样式自定义(兼容火狐)
    媒体查询
    vue移动端项目经验
    文字溢出时省略号表示
    vue2.0-4.0的移动端及PC端屏幕大小适配
    vue移动端UI组件库
  • 原文地址:https://www.cnblogs.com/tanghongbo/p/3956962.html
Copyright © 2011-2022 走看看