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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • python格式化json文件_pycharm对齐线

    python格式化json文件_pycharm对齐线1.json文件保存将数据保存为json格式,并存储到.json文件中,需要注意键值对均用双引号,而非单引号。样例如下所示:{“sampleDB”:{“shippedVsCustDemand”:[{“CUSTOMER”:”customer1″,”ITEM”:”desk”,”SUPPLIEDQTY”:25,”DEMANDQTY”:3},{“CUSTOMER”:”customer1″,”ITEM”:”drawer”,”SUPPLIEDQTY”:15,”DEMANDQTY”:

    2022年8月25日
    3
  • latex参考文献为网址「建议收藏」

    latex参考文献为网址「建议收藏」1、引入hyperref包:\usepackage{hyperref }2、举例:@misc{A:2005,  author = {AlexanderTotok},  title = {hello },  howpublished = {\url{http://cs.nyu.edu/totok/professional/software/tpcw/tpcw.html}}

    2022年9月10日
    0
  • vue 使用vue-i18n实现中英文语言切换,以及动态添加中英文「建议收藏」

    vue 使用vue-i18n实现中英文语言切换,以及动态添加中英文「建议收藏」一、安装。npminstallvue-i18n二、使用。(这里只写了核心代码)引入://引入插件和语言包importVueI18nfrom’vue-i18n’importzhfrom’@/i18n/langs/zh’importenfrom’@/i18n/langs/en’Vue.use(VueI18n);zh文件:exportdefault{placeStopOrder:”下止损单”,}en文件:exportdef

    2022年5月8日
    143
  • 浏览器offsetWidth、clientWidth、scrollWith等总结

    浏览器offsetWidth、clientWidth、scrollWith等总结  对象尺寸会涉及width和height,我们以width为例,height则是一样的道理。  1、clientWidth:对象可见的宽度,不包括滚动条等边线,会随窗口的显示大小改变。  clientWidth = 元素width+padding  2、scrollWidth:实际内容的宽,不包括边线宽度,会随着对象中内容的多少改变。  无滚动时等于c…

    2022年7月22日
    8
  • GridView编辑删除操作

    GridView编辑删除操作

    2021年12月15日
    33
  • python怎样安装whl文件

    python怎样安装whl文件python第三方组件有很多都是whl文件,遇到这样的whl文件应该怎样安装呢,今天来介绍一下whl文件怎样安装。(一)下载whl文件可以从下面;两个网站找到自己需要的whl文件,部分文件在国内网站上没有,pypi网站上是最全的。pypi网站:https://pypi.python.org/pypi/国内whl集合网:https://www.l…

    2022年4月5日
    107

发表回复

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

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