css解决子元素float浮动父元素坍塌的问题

一、坍塌产生的原因

因为浮动元素从文档流中移除，父元素处在正常流中，所以父元素不能被浮动元素撑大。

浮动元素脱离正常流，意思是布局时后面元素当它不存在（文字还是当它存在，环绕其身边），但仍然在dom树上。

二、坍塌解决方案

1. 参考在浮动布局情况下，让父级获得合适的高度

/*方法1. 浮动的父级设置高度*/
super {
    height: npx;
}

/*方法2. 浮动的父级设置overflow*/
super {
    overflow: hidden;
}

/*方法3. 浮动的父级兄弟设置clear，一般利用both同时清左右两边的浮动*/
brother {
    clear: left | right | both;
}

/*方法4. 浮动的父级伪类清浮动，一般利用both同时清左右两边的浮动*/
super:after {
    content: "";
    display: block;
    clear: left | right | both;
}