清除浮动: 清除浮动后造成的影响-->清除浮动主要为了解决父级元素因为浮动引起内部高度为0的问题
额外标签法(在最后一个浮动标签后,新新加一个标签, 给其设置clear: both;)(不推荐)
<div style="clear:both"></div>
我们清除了浮动,父元素自动检测盒子的高度,然后与其同高
优点: 通俗易懂, 方便
缺点: 添加无意义标签, 语义化差
父级添加overflow属性, 变成BFC(块级格式上下文),就可以解决浮动带来的影响(不推荐)
通过除法BFC方式,实现清除浮动
优点:代码简洁
缺点: 内容增多的时候容易造成不会自动换行,导致内容被隐蔽掉,无法显示要溢出的元素
.fahter{
width: 400px;
border: 1px solid deeppink;
overflow: hidden;
}使用before和after伪元素清除浮动(推荐使用): 这种方式也是使用额外标签方式达到效果，只是变相的使用了伪元素after/before，使得页面结构更简介，也是常用的清除浮动的方式
优点: 符合闭合浮动思想,结构语义化正确
缺点: ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: ""; /*元素设置为空*/
display: block; /*转换为块级元素*/
height: 0; /*高度为0*/
clear:both;/*清除浮动*/
visibility: hidden;/*将元素隐藏*/
}
/*下面为了兼容IE*/
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}具体使用
<body>
<div class="fahter clearfix">
<div class="big">big</div>
<div class="small">small</div>
<!--<div class="clear">额外标签法</div>-->
</div>
<div class="footer"></div>
</body>使用before和after双伪元素清除浮动
优点: 代码更简洁
缺点: 用zoom:1除法hasLayout
.clearfix:after,.clearfix:before{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}具体使用
<div class="fahter clearfix">
<div class="big">big</div>
<div class="small">small</div>
</div>
<div class="footer"></div>使用 display: flow-root(推荐):
一个新的 display 属性的值，它可以创建无副作用的 BFC。在父级块中使用 display: flow-root 可以创建新的 BFC。
给 <div> 元素设置 display: flow-root 属性后，<div> 中的所有内容都会参与 BFC，浮动的内容不会从底部溢出。
你可以从 flow-root 这个值的名字上看出来，它创建一个新的用于流式布局的上下文，类似于浏览器的根（html）元素。
具体使用
.box[style] {
background-color: aliceblue;
border: 5px solid steelblue;
}
.float {
float: left;
width: 200px;
height: 100px;
background-color: rgba(255, 255, 255, .5);
border:1px solid black;
padding: 10px;
} <div class="box" style="display:flow-root">
<div class="float">I am a floated box!</div>
<p>I am content inside the <code>display:flow-root</code> container.</p>
</div>实现效果:
