【 总结 】清除浮动

浮动

• 浮动元素脱离文档流 不占据空间

• 父元素不给高度

• 内部元素不浮动时会撑开

• 浮动的时候，父元素变成一条线

  ---

浮动的原理

浮动元素碰到包含它的边框或者浮动元素的边框停留

清除浮动的方法

• 空标签清除浮动

  <div class="box">
  		<div class="float"></div>
  		<div class="clear"></div>
  </div>
  
  <style>
  		.box{
  			width: 400px;
  			background-color: pink;
  		}
  		.float{
  			float: left;
  			width: 200px;
  			height: 200px;
  			background-color: red;
  		}
  		.clear{
  			clear: both
  		}
  </style>
  

• 给父元素设置 overflow

  <div class="box">
  		<div class="float"></div>
  </div>
  
  <style>
  		.box{
  			width: 400px;
  			background-color: pink;
  			/*overflow: hidden;*/
  			overflow: auto;
  		}
  		.float{
  			float: left;
  			width: 200px;
  			height: 200px;
  			background-color: red;
  		}
  </style>
  

• after伪类

  <div class="box clearfix">
  		<div class="float"></div>
  </div>
  
  <style>
         .box{
  			width: 400px;
  			background-color: pink;
  		}
  		.float{
  			float: left;
  			width: 200px;
  			height: 200px;
  			background-color: red;
  		}  
  		.clearfix::after{
              content:"";
              display:block;
              height:0;
              clear:both;
              visibility:hidden;
          }
  		// 针对IE浏览器
  		.clearfix{
              *zoom : 1 ;
          }
  </style>
  

• 双伪类

  <div class="box clearfix">
  		<div class="float"></div>
  </div>
  
  <style>
  	 .clearfix:after,.clearfix:before{
          content: "";
          display: table;
      }
      .clearfix:after{
          clear: both;
      }
      .clearfix{
          *zoom: 1;
      }            
  </style>