【前端开发】CSS父元素边框塌陷问题

前言

在使用float属性时会经常遇到父级元素的边框塌陷的问题，会造成严重的排版问题，如图所示。

使用float前

使用float后

解决办法

方法1：增高父元素高度

.father{
	border: 5px solid salmon;
	height: 110px;
}

缺点：高度是定死的，需要不断调整，容易出问题。

方法2：清除父元素部分浮动或添加清除浮动的元素

<p style="clear: both;">123</p>
<!-- 
     clear:left;  :清除左浮动
     clear:right; :清除右浮动
     clear:both;  :左右浮动都清除
-->

清除浮动后的元素不受前面元素浮动的影响，继续按块元素排列，撑起父元素。

方法3：overflow:hidden

.father {
            border: 5px solid salmon;
            overflow: hidden;
        }

给父元素增加overflow:hidden属性后，父元素就被撑起来了。
使用简单，但是下拉场景的不适用。

方法4：给父类添加一个伪类:after（推荐使用）

.father::after {
            content: '';
            display: block;
            clear: both;
        }

此方法和方法2原理相同，但是不用添加多余的元素，使用的最多，推荐。