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

Posted 2022-09-15 kldn208

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: "";