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

        float 属性定义元素在哪个方向浮动,可能的值有left、right、none、inherit。以往这个属性总应用于图像,使文本围绕在图像周围。

        例:

        

        对段落中的图片设置有浮动:

          

        

        图片出现在文字的右边,并被文字环绕。不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。

        但是需要注意的是,设置了float的元素会脱离文档流,不具有高度值,即出现高度坍塌的现象。若给上述最外层的div加上背景色,则 

     

        若减少文字,则

     

        最外层div的高度仅被文字撑开,图片被设置浮动后,高度坍塌,无法对外层高度起到贡献作用。

        由于float的这种性质,在使用时常会对布局产生奇怪的效果,必要时需要清除浮动。这里总结一下,几种常用的清除浮动的方法:

        1. clear:both

        在浮动元素下面加一个空div,设置clear:both,即

        <div clear:both></div>

        

       图片又独占一行,且外层div高度增大。

       2.overflow: hidden

       对浮动元素的父级元素设置overflow:hidden。

      3. .clearfix

       对包含浮动元素的父级添加class="clearfix",并设置

       .clearfix{

        content:"";

        display:block;

        clear:both;

    }

       .clearfix{

        *zoom:1;

    }/*为兼容IE*/    

        

  • 相关阅读:
    (转)Hadoop MapReduce链式实践--ChainReducer
    (转)Permission denied: win7下面eclipse上传本地文件到DFS && 运行M/R程序时出现的同样的错误解决方法
    为什么需要注册OCX控件?
    WPF插件开发:使用FrameworkElementAdapters时VS报错的问题
    C# semphore的使用
    C# int可以表示的最大值
    WCF客户端从服务器下载数据
    C# 读取WAV文件(详细)
    C#读取wav文件
    VEMap.DeleteAllShapeLayers 方法
  • 原文地址:https://www.cnblogs.com/SofiaTJU/p/8523591.html
Copyright © 2011-2022 走看看