div清除浮动的四种方式

div 清除浮动的四种方式

清除浮动主要是为了解决父元素因为子级浮动引起高度为 0 的问题。
简单来说给父元素加一个高度也能解决这个问题，但是很多情况下不方便给父元素高度。所以，一般情况下，应该让子元素内容自动撑开父元素，不要写死父元素的高度。
clear 属性用于清除浮动，以下是清除浮动的几种常见方式。

1. 额外标签法

• 在浮动元素后面添加一个新的空 div，这个空 div 的样式添加 clear：both。

• 语法:

    	 .clear {
    	      clear: both;
    	    } 
    	    
       <div class="child1"></div> // 浮动元素
       <div class="child2"></div> // 浮动元素
       <div class="clear"></div>  
  

• 优点：代码简洁。

• 缺点：添加了无意义的标签，结构化较差。

2. 为父元素添加 overflow 属性

• 语法： 父元素选择器{ overflow：hidden | auto | scroll}
• 为父级元素添加 overflow 触发 BFC,BFC 可以清除浮动。
• 优点 ：内容简洁。
• 缺点：内容增多的时候容易造成不会自动换行，导致内容被隐藏掉，无法显示需要溢出的元素 。

3. 使用 after 伪元素清除浮动

• 语法：

    	.clearfix:after {
    	   display: block;
    	   content: '.';
    	   height: 0;
    	   visibility: hidden;
    	   clear: both
    	}
    	 // ie6、ie7 浏览器的处理方式 
    	.clearfix {
    	  *room: 1;
    	}
  

  • 优点：符合闭合浮动的思想，结构语义化正确
  • 缺点：ie6，ie7 不支持

  4. 使用 before 和 after 双伪元素清除浮动

  • 语法：

      .clearfix:before,.clearfix:after {
        content: '';
        display: table;
      }
      .clearfix:after {
        clear: both;
      }
    

  • 强烈推荐使用这种方式。