清除浮动伪元素/双伪元素

清除浮动
问题：
在做浮动布局的时候，如果父级盒子嵌套了子级盒子，如果父级盒子没有设置固定的高度，那么里面的子级盒子浮动以后，父级盒子的高度就不会被撑开，显示默认的高度为0就会影响后面的盒子显示布局；
说明：
•用浮动布局的时候我们必须要嵌套一个父级盒子，分为以下两种情况：
•1、有些父级盒子能够设置固定的高度，一定要设置；
•2、有些页面由于页面的需要不能设置高度，所以子元素浮动之后脱离了文档流，父级盒子不会被撑开，会影响我们的布局，所以要清除浮动的影响；比如：产品的详情页、产品的展示列表页等；
•3、如果父级盒子没有设置固定的高度，但是子级盒子没有浮动，子级盒子就会撑开父级盒子；
清除浮动的本质
父级盒子因为子级浮动引起内部高度为0的问题，清除浮动之后，父级就会根据浮动的盒子自动检测高度，从而解决影响下面盒子的布局问题；
解决方案：
方案1、如果盒子允许设置固定的高度我们就直接给父级盒子设置固定的高度就会解决问题；

清除浮动的方法 – 方案2
清除浮动之额外标签法（不建议使用）
在最后一个浮动元素的末尾添加一个空的标签：例如：

<div style=“clear:both;”></div>

书写方便，但是会添加许多没有意义的标签，不建议使用；

<div class="title">
        <h3>超值体检</h3>
        <a href="#">查看更多》</a>
        <div style="clear:both;"></div>
    </div>

父级加overflow属性法（推荐使用1）
直接给父级添加overflow:hidden;强制的区分了父子级的关系，让父级盒子自适应子级盒子的高度；
简单了解overflow
overflow:hidden; 溢出隐藏，将超出固定宽高的盒子的内容隐藏掉；
overflow:auto; 溢出滚动，将超出固定宽高的盒子的内容以滚动条的像是显示；
清除浮动之after伪元素（推荐使用—+1***）
After伪元素清除浮动法实际开发中推荐使用：
谁里面的子级盒子浮动了，就在谁的开始标签身上添加class=“clearfix”

/*声明清除浮动的样式*/
.clearfix:after {
	content: "";
	display: block;
	height: 0;
	visibility: hidden;
 	clear: both;
}
.clearfix {
    *zoom: 1;  /*ie6,7 专门清除浮动的样式*/
}

双伪元素清除浮动（推荐）
使用方法和After伪元素法一模一样

/*声明清除浮动的样式*/
.clearfix:before ,.clearfix:after {
	content: "";
	display: table;
}
.clearfix:after {
    clear:both;
}
.clearfix {
   *zoom: 1;  /*ie6,7 专门清除浮动的样式*/
}