CSS - 高度坍塌和外边距溢出问题及解决方法

CSS - 高度坍塌和外边距溢出

高度坍塌

  1. 成因

    • 父元素 div 未设置高度
    • 子元素全部设置浮动(float: left | right;),浮动元素 脱离文档流不占页面空间
    • 由于父元素为设置高度,高度靠内部子元素撑开,而今子元素全部脱离文档流,所以此时父元素的高度为 0,给父元素和子元素设置 边框border: 1px solid #000;)或者 显示父元素轮廓outline: 1px solid #000;),会出现子元素超出了父元素的区域范围,即为:高度坍塌现象
  2. 解决方法

    2.1 根据子元素的最大高度为父元素设置高度

    • 前提是要知道子元素高度

    2.2 父元素也设置为浮动

    • 会影响父元素的兄弟元素,可能破坏原有的页面布局

    2.3 父元素设置 overflow: auto | hidden; 属性

    • 只要溢出的内容一律都会被隐藏,可能会隐藏不想被隐藏的部分

    2.4 为父元素增加伪元素(推荐)

    • /**
      	.div-parent 为父元素类选择器
      	设置 content 为空,父元素最后一个伪元素子元素内容为空
      	clear: both 会清除该元素左右两端的所有的浮动元素,即该元素在父元素中处于所有子元素的最	  下方,且存在于文档流中,占页面空间;父元素识别到该元素将会自适应高度
      */
      .div-parent::after {
          display: table;
          content: "";
          clear: both;
      }
      

外边距溢出

  1. 成因

    • 父元素 div 未设置边框
    • 第一个子元素设置了上外边距(margin-top: 10rem;)或者 最后一个子元素设置了下外边距(margin-bottom: 10rem;
    • 导致父元素与子元素一起发生相应的偏移的现象,即为:外边距溢出现象
  2. 解决方法

    • 为父元素增加伪元素(推荐)

      /**
      设置外边距的元素不与父元素直接接触既不会一起发生偏移
      而父元素前或后添加的伪元素子元素 content 为空,所以不会出现不希望看到的效果
      /
      /
      * 上外边距溢出 /
      .div-parent::before {
      display: table;
      content: "";
      }
      /
      * 下外边距溢出 */
      .div-parent::after {
      display: table;
      content: "";
      }

posted @ 2019-08-31 17:38  KLDN_如初  阅读(...)  评论(...编辑  收藏