zoukankan      html  css  js  c++  java
  • 清除浮动

    不清除浮动的一个常见危害是高度塌陷。关于高度,下面说这么几种情况:

    1. 如果父元素已经规定了度,不会高度塌陷,但可能会溢出(如果子元素总高度超过父元素的话)
    2. 如果父元素没有规定高度:
      2.1 如果所有子元素都浮动,父元素没有高度,这时候给父元素设置边框的话,就会发现边框保不住子元素
      2.2 如果存在没有浮动的子元素,父元素高度取决于没有浮动的子元素,所以如果浮动子元素更高的话,还是会塌陷

    解决浮动的办法: clear:both,不允许元素两侧有浮动(你可以理解为,遇到浮动元素会往下挪,从而撑起高度)

    1. 使用::after伪元素
    .cl{zoom:1;}
    .cl::after{content:'';display:block;height:0;visibility:hidden;clear:both;}
    

    加两个点是CSS3新规,兼容的话一个点就好

    1. 直接为父元素建立一个清除浮动的最末子元素,如
    <div>
        <div style="float:left;">I M LEFT</div>
        <div style="float:right;">I M RIGHT</div>
        <div style="clear:both;"></div>
    </div>
    

      

    缺点在于创建了不必要的节点,所以普遍做法是第一种

  • 相关阅读:
    13-计算属性和侦听器
    12-指令系统介绍
    11-vue的使用
    10-vue的介绍
    09-babel
    08-webpack的介绍
    07-nodejs中npm的使用
    06-Nodejs介绍
    05-面向对象
    Docker结合Jenkins构建持续集成环境
  • 原文地址:https://www.cnblogs.com/AaronNotes/p/6524288.html
Copyright © 2011-2022 走看看