浮动产生的问题
- 因为浮动元素脱离文档流,同级没浮动的元素会表现的它不存在一样
- 如果父元素没有设置宽高,如果子元素全部浮动,会导致父元素的高度无法撑开,影响与父元素同级的元素
解决办法
- 同级元素被覆盖:同时浮动同级元素(不推荐,后面的布局会受到影响)
- 在浮动元素后面加空标签清除浮动(不推荐,无意义的标签)
- 给非浮动元素加clear:both(left/right)
- 如果子元素全部浮动,那么父元素无法撑开:给父元素加after伪元素
.clearfix:after{ content: '.'; visibility: hidden; display: block; height: 0; clear: both; }
- 父元素overflow:hidden/auto;zoom:1(for IE)