如何清除浮动

浮动元素

浮动元素特点

1、浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以可以用浮动元素来设置文字环绕图片的效果；
2、元素设置浮动以后，将会从文档流中脱离。此时的块元素不再独占页面的一行，块元素的宽度和高度是由内容撑开。
3、当行内元素（如：span）脱离文档流以后会变成块元素，特点和块元素一样，可以设置宽和高。

浮动元素的高度塌陷问题

在浮动布局中，父元素的高度默认是被子元素撑开，当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离，将会无法撑起父元素的高度，导致父元素的高度丢失。父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱。
例如：

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

```css
.box1{
  border:10px solid red;
}
.box2{
	width:100px;
	height:200px;
	background-color: orange;
	float:left; 
} 

可以看到出现了高度塌陷现象。
解决浮动元素高度塌陷问题的方法就是将父元素开启BFC。有如下方法：
1、设置元素的浮动；
2、将元素设置为行内块元素；
3、将元素的overflow设置为一个非visible的值。如：overflow:hidden。
4、使用after伪类进行解决
如：

<div class="box1">
			<div class="box2"></div>
		</div>
<style type="text/css">
	.box1{
		border:10px solid red;
	}
	.box2{
		width:100px;
		height:200px;
		background-color: orange;
		float:left; 
	} 
	.box1::after{
		content: '';
		display: block;
		clear: left;
		}
	</style>

可以看到，父元素不再出现高度坍塌，并且可以随着子元素的增大而增大。
当然，还可以使用clearfix，此方法是最好的，可以同时解决高度坍塌和父子元素外边距重叠的问题。

<div class="box1 clearfix">
		<div class="box2"></div>
	</div>
.clearfix::before,
	.clearfix::after{
		content: '';
		display: table;
		clear: both; 
	}

BFC(Block Formatting Context)块级格式化环境

1、元素开启BF后的特点：
1）开启BFC的元素不会被浮动元素所覆盖；
2）开启BFC的元素子元素和父元素外边距不会重叠；
3）开启BFC的元素可以包含浮动的子元素。
2、BFC的触发方式：
float：为none；
position:absolulute，fixed；
overflow:hidden；
display:in-line-block，table-cell，able-caption，flex，in-line-fiex。
## clear
作用：清除浮动元素对当前元素所产生的影响。
clear：left 清除左侧浮动元素对当前元素的影响；
clear：right 清除右侧浮动元素对当前元素的影响；
clear: both 清除两侧中最大影响的那侧。