一、坍塌产生的原因
因为浮动元素从文档流中移除,父元素处在正常流中,所以父元素不能被浮动元素撑大。
浮动元素脱离正常流,意思是布局时后面元素当它不存在(文字还是当它存在,环绕其身边),但仍然在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;
}