css清除浮动的五种方法图片_万能清除浮动法

css清除浮动的五种方法图片_万能清除浮动法css清除浮动有哪五种方法呢?如何使用他们呢

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

清除浮动的五种方法

  1. 父级 div 定义 height
     原理:父级 div 手动定义 height,就解决了父级 div 无法自动获取到高度的问题。简单、代码         少、容易掌握,但只适合高度固定的布局.   

         

  2. 结尾处加空 div 标签 clear:both
    原理:在浮动元素的后面添加一个空 div 兄弟元素,利用 css 提高的 clear:both 清除浮动,让父级 div 能自动获取到高度,如果页面浮动布局多,就要增加很多空 div,让人感觉很不好
    <div class="div1">         <div class="left">Left</div>        <div class="right">Right</div>        <div class="clearfix"></div> </div> .clearfix{             //css样式    clear:both;}

    Jetbrains全家桶1年46,售后保障稳定


  3. 父级 div 定义 伪类:after 和 zoom
    原理:IE8 以上和非 IE 浏览器才支持:after,原理和方法 2 有点类似,zoom(IE 转有属性)可解决ie6,ie7 浮动问题 ,推荐使用,建议定义公共类,以减少 CSS 代码
    /*清除浮动代码*/
    
    .clearfix:after{
    
    content:"";
    
    display:block;
    
    visibility:hidden;
    
    height:0;
    
    line-height:0;
    
    clear:both;
    
    }
    
    .clearfix{
        zoom:1;
    }
    
    
    //写完之后在父级添加class='clearfix'就好了
  4. 父级 div 定义 overflow:hidden (超出盒子部分会被隐藏,不推荐使用)
  5. 双伪元素法
    .clearfix:before,.clearfix:after {
    
    content: "";
    
    display: block;
    
    clear: both;
    
    }
    
    .clearfix {
    
    zoom: 1;
    
    }
    
    
    //写完之后在父级添加class='clearfix'就好了

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/234345.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • SwipeRefreshLayout与RecyclerView的巧夺天工

    SwipeRefreshLayout与RecyclerView的巧夺天工平常开发我们需要使用ListView下拉刷新或者其下拉加载的时候,不是自己写就是用别人写好了,但是编程中有一点是不变的,就是一般封装好的东西,其扩展性极低,比如你使用xutils,imageloader等开源框架的时候,它允许你扩展吗?答案当然是否,那我想要实现自己非常酷酷的ListView时候,只有自己动手实现。不过,谷歌在2015在v4开发包加入豪华套餐SwipeRefreshLayout供

    2022年6月25日
    39
  • pytest parametrize fixture_参数化方法

    pytest parametrize fixture_参数化方法前言当某个接口中的一个字段,里面规定的范围为1-5,你5个数字都要单独写一条测试用例,就太麻烦了,这个时候可以使用pytest.mark.parametrize装饰器可以实现测试用例参数化。官方示

    2022年7月31日
    5
  • pandas drop参数_pandas concat函数

    pandas drop参数_pandas concat函数pandas中dropna()参数详解DataFrame.dropna(axis=0,how=‘any’,thresh=None,subset=None,inplace=False)1.axis参数确定是否删除包含缺失值的行或列axis=0或axis=’index’删除含有缺失值的行,axis=1或axis=’columns’删除含有缺失值的列,importpandasaspdimportnumpyasnpdf=pd.DataFrame({“name”:[‘Alfr

    2026年1月18日
    3
  • python和java哪个更值得入手-Python和Java该如何选择?选哪个好?[通俗易懂]

    python和java哪个更值得入手-Python和Java该如何选择?选哪个好?[通俗易懂]在这里为大家介绍一下,其实Python和Java是两种截然不同的编程语言,两者都算是互联网行业中主流的编程语言,不过两者使用起来都是非常好用的,当然要看自己的需求,接下来为大家简单的区分一下Python和Java。Java和Python该如何选择?可以通过以下几个方面来决定:1、从语法结构上来说,Java是面向对象的编程语言,语法结构上面更加严谨一些,不过Java的模块化存在问题。而对比Java来…

    2022年7月8日
    28
  • pycharm安装CV2,tensorflow[通俗易懂]

    pycharm安装CV2,tensorflow[通俗易懂]在pycharm中导入importcv2时不能正常使用,需要安装cv2库,但是我们在pycharm中安装库时没有找到CV2,就需要安装opencv库,我采用的是以下的方式:1、首先看下pycharm中的环境,我现在用的环境是anaconda下的PyCharmproject2、在菜单栏中打开anacondaprompt(anaconda3)3、刚开始进入时环境是4、切换环境为pycharm中环境activatePyCharmproject5、已经下好了opencv的whl文件,我下到了3

    2022年8月26日
    11
  • MySQL基础–数据库管理+数据表管理

    MySQL基础–数据库管理+数据表管理数据库的管理+数据表管理+Python操作MySQL数据库

    2022年8月11日
    8

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号