zoukankan      html  css  js  c++  java
  • CSS 清除浮动的四种方法

    在实际项目中,我们经常会用到float属性来对页面进行布局。当使用float时,意味着该元素已经脱离了文档流,相当于浮于文档之上,不占据空间。但是针对兄弟元素为文字内容时,会占据一定空间,从而产生文字环绕的效果。如果不清除浮动,会导致父元素的高度撑不开等一系列问题。

    那如何清除浮动呢?给出以下几种方法,一些不常用的就不说明了。


    1.对浮动元素的父容器添加after伪类,并给伪类设置clear属性(给浮动元素的周围元素添加clear属性,清除该浮动元素)
    在浮动元素的后面增加一个块元素,对块元素设置clear:both来清除两边的浮动元素,从而让父元素获得实际的高度。这个块元素可以在浮动元素的父容器上添加伪类来实现。f-clearfix加在浮动元素的父容器上。
    .f-clearfix:after{content:'';display:block;height:0;overflow:hidden;clear:both;visibility:hidden;}
    .f-clearfix{zoom:1;}

    2.对浮动元素的父容器设置高度
    这种办法比较局限,通常用于父容器高度确定的情况下。

    3.对浮动元素的父容器添加overflow:hidden/auto属性
    overflow:hidden/auto相当于是让父级紧贴内容,包括浮动的div元素。使用时必须定义width或zoom:1,不能定义height,和position,不然超出的尺寸会被截掉。

    3.让父元素同样浮动。
    治标不治本。

  • 相关阅读:
    原型模式
    windows下Redis安装及利用java操作Redis
    redis笔记
    STS 安装SVN插件
    java 操作MongoDB简易工具类
    Mysql 单表数据量过大移除数据
    Mysql 提示拷贝效率
    JS 图片显示一部分 小计
    FashJson转换
    WIndow MongoDb安装和启动
  • 原文地址:https://www.cnblogs.com/zourong/p/3899528.html
Copyright © 2011-2022 走看看