float浮动导致父元素坍塌

今天遇到了一个情况，给子元素指定浮动之后，父元素的背景颜色就消失了。

原来是这个样子的，

.head-li{
            display: inline;
            list-style: none;
            margin-left: 34px;
            border: 4px solid #52a6e8;
            background-color: #66afe9;
        }

然后我希望里面的li元素变为浮动。

于是

.head-li{
            display: inline;
            list-style: none;
            margin-left: 34px;
            border: 4px solid #52a6e8;
            background-color: #66afe9;
            float: left;
        }

我发现父元素变形了。

原来之前父元素的高度是被子元素撑开的，现在子元素变成浮动了，父元素就没法被撑开了。

经过百度搜索，我发现有以下几种解决方案：

1、 把父元素也改为浮动

但是 这样会影响到布局。

2、给父元素一个固定的高度

这样只适用于子元素高度已知且固定。

3、给父元素加一个

overflow: hidden

当子元素浮动时，父元素会增加高度去包裹子元素，这个高度是自适应子元素的高度。

4、在子元素后面加一个div

<div style="clear:both"></div>

清除浮动

5、after 伪类 对父元素使用 消除浮动

#head-ul:after{
    content: '';
    display: block;
    clear: both;
}

第五种最好！！！

标签：浮动,head,元素,坍塌,float,高度,li,display
来源： https://www.cnblogs.com/joesenno1/p/15849078.html