带你了解CSS浮动的魅力

（1）由于浮动元素脱离了文档流，所以父元素的高度无法被撑开，影响了与父元素同级的元素；若没有给父元素设置高度，那么父元素就不会在显示屏上显示。

（2）与浮动元素同级的非浮动元素会跟随其后，因为浮动元素脱离文档流不占据原来的位置

（3）如果该浮动元素不是第一个浮动元素，则该元素之前的元素也需要浮动，否则容易影响页面的结构显示

三、清除浮动--解决浮动带来的问题

1、后续标准流被覆盖

由于元素浮动之后，会脱离文档流，不占位置，会让后续不浮动的元素上前补位.浮动的元素就会遮盖住后续标准流。

如果后续元素不想上前补位，需要对此元素设置清除浮动 clear:

取值：1.left 清除左浮动对我的影响

2.right 清除右浮动对我的影响

3.both 清除左右浮动对我的影响

4.none 不清除影响

给box1添加浮动后，box1脱离文档流，box2会向上移动到box1的位置，导致布局紊乱，代码如下：

<style type="text/css">
		.box1{
			width:200px;
			height:200px;
			float:left;
			background:pink;
		}
		.box2{
			width:500px;
			height:500px;
			background:plum;
		}
	</style>

<body>
	<div class="box1">box1</div>
	<div class="box2">box2</div>
</body>

解决方案：给box2 添加如下代码：

clear:both;

2、父级盒子高度塌陷问题

父元素不写高，靠子元素撑起高度,.所有子元素都浮动，那么所有子元素都脱离文档流，父元素认为自己内部没有元素了，所以父元素就没有高度了。父级盒子里可以装很多浮动盒子，若指定父盒子高度，则溢出的盒子会另起一行。

正常情况下，当父元素不设置宽高时，父元素的高度由子元素撑开，代码如下：

<body>
	<div class="box1">
		<div class="box2"></div>
	</div>
</body>

.box1{
	border:10px solid pink;
}
.box2{
	width:200px;
	height:200px;
	background:plum;
}

但是，当给子元素设置浮动后，就造成了父元素高度塌陷，代码如下：

<style type="text/css">
			.box1{
				border:10px solid pink;
			}
			.box2{
				width:200px;
				height:200px;
				background:plum;
				float:left;
			}
		</style>

解决方法

1、额外标签法：给box1增加一个子元素（必须加在最后），并给这个子元素设置 clear: both

<body>
	<div class="box1">
		<div class="box2"></div>
		<div class="box3"></div>
	</div>	
</body>

.box3{
	clear:both;
	}

2、给父元素box1加 overflow:hidden
3、给父元素加 float
4、最好的解决方案是：给父元素添加如下自定义类 .clearfix

.clearfix:after{
  content:"";
  display:table; 
  }

.clearfix:before，
.clearfix:after{
  content:"";
  display:block;
  clear:both;
  }

3、垂直外边距重合

第一种情况：
垂直排列的两个元素，上面元素的下外边距与下面元素的上外边距同时设置时，会取联两者较大的值而不是取两者之和。
第二种情况：
父子元素垂直外边距相邻时，给子元素设置外边距，会同时导致父元素也同样拥有外边距的值，即

父元素与子元素同时移动。

解决方法如下：

1、给子元素设置 border-top （此方法会导致元素多设置border ）；
2、给父元素设置 padding-top （此方法需要重新计算父元素的高度）；
3、给父元素设置 overflow:hidden（此方法在需要实现溢出功能时，将不能使用）
4、最好的解决方案是：给父元素添加如下自定义类 .clearfix

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

 }
 .clearfix {
     *zoom: 1;
 }