zoukankan      html  css  js  c++  java
  • 围住浮动元素的三种方法

    方法一:为父元素加入overflow:hidden

    实际上,overflow:hidden申明的真正用途是防止包括元素被超大内容撑大.应用overflow:hidden之后,包括元素依旧保持其设定的宽度,而超大的字内容则会被容器剪切掉.除此之外,overflow:hidden还有还有一个作用,即它能可靠地迫使父元素包括其浮动的子元素.


    方法二:同一时候浮动父元素


    方法三:加入非浮动的清除元素

    即给父元素加入一个非浮动的子元素,然后清除该子元素(即不显示).

    而加入子元素又有两种方法,

    ①简单地在HTML标记中加入一个子元素.并给他应用clear属性.因为没有默认的样式,不会引入多余的空间占用

    一般是<div style="clear:both"></div>


    ②给父元素加入一个类clearfix

    clearfix例如以下:

    .

    .clearfix:after{
      content:".";
      display:block;
      height:0;
      visibility:hidden;
      clear:both;
    }



    这三种方法的使用要因地制宜.比方,不能在下拉列表的顶级元素上应用overflow:hidden.否则作为子元素的下拉菜单就不会显示了.由于下拉菜单会显示在其父元素区域的外部,而这恰恰是overflow:hidden会阻止的.再比方,不能对已经靠自己主动外边距居中的元素使用"浮动父元素"技术,否则他就不会再居中.


  • 相关阅读:
    Zookeeper安装-单机版
    Centos 7 安装 Redis 5
    java利用dom4j将xml字符串转换为json
    计算机科学导论笔记-计算机组成
    计算机科学导论笔记-数据运算
    计算机科学导论笔记-数据存储
    计算机科学导论笔记-数字系统
    计算机科学导论笔记
    springmvc03
    springmvc02
  • 原文地址:https://www.cnblogs.com/tlnshuju/p/6837594.html
Copyright © 2011-2022 走看看