清除浮动的四种方式

清除浮动原因

清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题

清除浮动的四种方法

额外标签法
谁清除浮动，就在其后额外添加一个空白标签

// 要给small清除浮动，small后添加一个空白标签clear(类名可以随意），设置clear:both;即可
<div class="fahter">
        <div class="big">big</div>
        <div class="small">small</div>
        <div class="clear">额外标签法</div>
</div>

.clear {
	clear:both;
}

父级添加overflow属性

可以通过触发BFC的方式，实现清除浮动效果
必须定义width或zoom:1，同时不能定义height
.father {
	width:400px;
	overflow:hidden;
}

注意：别加错位置，是给父级加（并不是所有的浮动都需要清除，谁影响布局，才清除谁）
使用after伪元素清除浮动

.clearfix:after{
	content: "";
	display: block;
	height: 0;
	clear:both;
}
 

<div class="father clearfix">
	<div class="big">big</div>
	<div class="small">small</div>
</div>
<div class="footer"></div>

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

.clearfix:after,.clearfix:before{
	content: "";
	display: block;
	clear: both;
	height:0;
}

<div class="father clearfix">
	<div class="big">big</div>
	<div class="small">small</div>
</div>
<div class="footer"></div>