原因-浮动脱离文档流~
问题(即产生的景响):
父元素高度塌陷(无法撑开父元素的高度-背景、边框不能正常显示)
景响它之后元素布局
解决(即清浮动的方法):
1.给父元素固定高度
不够灵活
2.给父元素加overflow:hidden;/scroll/auto
可能会将益出部分隐藏或显示滚动条
3.在浮动元素之后加一个[空的]:[不浮动][块],元素{clear : both}
导致结构冗余
4.利用:after的元素替代方案3中的div【推荐】
给父元素加.clearfloat
.clearfloat:after {
content:"";
display: block;
clear: both;
height:0;
line-height:0;
font-size:0;
overflow : hidden;
}
1.浮动脱离文档流(不占原来位置)
2.提升层级(浮动元素和普通元素产生重叠区域时,浮动覆盖普通元素)
3.浮动可以使行内元素支持宽高(生成了一个块级框)
4.可以使未定宽度的块元素适应内应
5.浮动元素本身包含浮动子元素不会出现高度塌陷的问题
6.浮动元素不会出现margin值塌陷间题
7.浮动会引起文本绕排(文字、行内元素)