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

浮动产生的问题

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

解决办法

• 同级元素被覆盖：同时浮动同级元素（不推荐，后面的布局会受到影响）
• 在浮动元素后面加空标签清除浮动（不推荐，无意义的标签）
• 给非浮动元素加clear:both（left/right）
• 如果子元素全部浮动，那么父元素无法撑开：给父元素加after伪元素

      		.clearfix:after{
  			content: '.';
  			visibility: hidden;
  			display: block;
  			height: 0;
  			clear: both;
  		}
      	

• 父元素overflow：hidden/auto;zoom:1(for IE)

转载于:https://www.cnblogs.com/t1amo/p/6554363.html