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'就好了

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • hashmap和hashtable和hashset的区别_Hashtable

    hashmap和hashtable和hashset的区别_Hashtable相同点:hashmap和Hashtable都实现了map接口不同点:Hashtable是不允许键或值为null的,HashMap的键值则都可以为null。实现方式不同:Hashtable继承了Dictionary类,而HashMap继承的是AbstractMap类。初始化容量不同:HashMap的初始容量为:16,Hashtable初始容量为:11,两者的负载因子默认都是:0.75。扩容机制不同:当已用容量>总容量*负载因子时,HashMap扩容规则为当前

  • win10图标上面有白纸_win10桌面部分图标变白,双击打不开

    win10图标上面有白纸_win10桌面部分图标变白,双击打不开方法1:第一步:新建txt(命名随意)复制以下文本:@echoofftaskkill/f/imexplorer.exeCD/d%userprofile%\AppData\LocalDELIconCache.db/astartexplorer.execho执行完成第二步:改txt扩展名为bat右键bat文件“以管理员身份运行”(此时会闪屏,之后F5手动刷新屏幕)…

    2022年10月10日
  • linux shell 循环处理文件夹每个文件

    linux shell 循环处理文件夹每个文件在linux下,如果有一个文件夹,下面有好几个文件。每个文件如abc.csv这种格式。我想一个个处理文件,并且取得前缀abc,生成新文件abc.text.代码如下。注意我这里采用的是把*.cnf处理成*.csvfeatureSAT12是我需要调用的程序,在DIMACS上一个文件夹。#!/bin/bashPATH=”DIMACS”//最好使用绝对路径cd$PATHfor

  • ue4封装接口_ue4导出模型

    ue4封装接口_ue4导出模型原创文章,转载请注明出处。本文带大家认识UE4插件/模块的使用方式Dll。既然为DLL,那么我们就可以对其封装,做到不公开cpp的目的。1>新建一个Plugin2>在plugin中创建一个Actor类,并在里面写一个UE4的Log输出函数。3>对其进行编译,编译出不同模式的dll出来4>在UE4场景中测试我们Log函数5>删除cpp文件6>在我们的.build.cs中添加不参数编译的参数bUsePrecompiled=true;7>再到UE4场景中测试我们L

  • dubbo负载均衡策略

    dubbo负载均衡策略121212dubbo负载均衡策略RandomLoadBalance–随机负载均衡默认情况下,dubbo是RandomLoadBalance,随机调用实现负载均衡,可以对不同provider设置不同

  • 五大常用算法之五:分支限界法

    一、基本描述类似于回溯法,也是一种在问题的解空间树T上搜索问题解的算法。但在一般情况下,分支限界法与回溯法的求解目标不同。回溯法的求解目标是找出T中满足约束条件的所有解,而分支限界法的求解目标则是找

    2021年12月25日

发表回复

您的电子邮箱地址不会被公开。

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