美文网首页
浮动与清除浮动

浮动与清除浮动

作者: Dragoncod | 来源:发表于2016-12-29 18:22 被阅读0次

浮动(float)

  • 正常流 normal flow
  • 浮动 定位 脱标 out of flow
  • 浮动的目的:可以让多个块级元素放到一行上面。
float:left;
float:right;
float:none;
position:absolute;
position:relative;
position:fixed;
position:static;
position:inherit;

清除浮动

  • 清除浮动: 根据情况需要来清除浮动。
  • 清除浮动的目的: 就是为了解决父盒子高度为0 的问题。
  • 清除浮动的方法:
    1.额外标签法
    2.overflow:hidden; 触发bfc模式,就不用清除浮动。
    3.伪元素
.clearfix:after{
       content:"";
       visibility:hidden;
       display:block;
       height:0;
       clear:both;
}
.clearfix{
        zoom:1;
}
清除浮动真正的叫法应该是闭合浮动。

4.双伪元素

.clearfix:before,.clearfix:after{
        display:table;
        content:"";
}
.clearfix:after{
        clear:both;
}
.clearfix{    
        zoom:1;
}

相关文章

  • css清除浮动

    前端开发中浮动处处可见,本文探讨浮动的成因以及如何更加有效的清除浮动。 1、浮动与清除浮动 2、清除浮动 基本cs...

  • 浮动与清除浮动

    浮动:使元素脱离文档流,按照指定方向(左右)发生移动,遇到父边界或者相邻的浮动元素停下来,脱离文档流。 文档流:是...

  • 浮动与清除浮动

    原文地址:浮动与清除浮动 浮动 浮动的概念 浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素...

  • 浮动与清除浮动

    浮动float 文档流 文档中可显示对象在排列时所占用的位置 浮动的定义 使元素脱离文档流,按照指定的方向发生移动...

  • 浮动与清除浮动

    浮动元素会脱离文档流。 浏览器按代码顺序渲染,当浮动元素在浮动时遇到其它浮动元素会排在它的后面,如图:浮动1浮动2...

  • 浮动与清除浮动

    浮动(float) 正常流 normal flow 浮动 定位 脱标 out of flow 浮动的...

  • 浮动与清除浮动

    这是我在云峰分享课时做的总结,在这里记录一下和跟大家一起分享一下, 一,浮动特性 1,脱离当前的标准流,可以设置高...

  • 11.22 前端学习

    清除浮动 clear:left清除左浮动clear:right清除右浮动clear:both清除对它影响最大的浮动...

  • 前端06

    清除浮动 clear:left清除左浮动clear:right清除右浮动clear:both清除对它影响最大的浮动...

  • 06 前端学习

    清除浮动 clear:left清除左浮动clear:right清除右浮动clear:both清除对它影响最大的浮动...

网友评论

      本文标题:浮动与清除浮动

      本文链接:https://www.haomeiwen.com/subject/nitpvttx.html