浮动产生的问题&解决办法

浮动产生的问题

  • 因为浮动元素脱离文档流,同级没浮动的元素会表现的它不存在一样
  • 如果父元素没有设置宽高,如果子元素全部浮动,会导致父元素的高度无法撑开,影响与父元素同级的元素

解决办法

  • 同级元素被覆盖:同时浮动同级元素(不推荐,后面的布局会受到影响)
  • 在浮动元素后面加空标签清除浮动(不推荐,无意义的标签)
  • 给非浮动元素加clear:both(left/right)
  • 如果子元素全部浮动,那么父元素无法撑开:给父元素加after伪元素
        		.clearfix:after{
    			content: '.';
    			visibility: hidden;
    			display: block;
    			height: 0;
    			clear: both;
    		}
        	
  • 父元素overflow:hidden/auto;zoom:1(for IE)
posted @ 2017-03-15 15:15  T1amo  阅读(288)  评论(0编辑  收藏  举报