清除浮动的本质
清除浮动元素脱离标准流造成的影响 策略： 闭合浮动，只让浮动在父盒子内部受影响，不影响父盒子外面的其它盒子 浮动演示：<style>
.box-father {
width: 1000px;
border: 1px solid black;
}
.box-child {
float: left;
width: 100px;
height: 100px;
background-color: aqua;
}
.footer {
height: 30px;
background-color: brown;
}
</style>
<div class="box-father">
<div class="box-child">盒子</div>
<div class="box-child">盒子</div>
</div>
<div class="footer"></div>额外标签法
在浮动元素尾部添加一个空的标签,这个标签只能是块级元素，不能是行内元素：<div class="box-father">
<div class="box-child">盒子</div>
<div class="box-child">盒子</div>
<div style="clear: both"></div>
</div>
<div class="footer"></div>overflow属性
给父元素添加overflow属性，将其属性设置为hidden、auto或scroll都可以，缺点是无法显示溢出的部分：.box-father {
width: 1000px;
border: 1px solid black;
overflow: hidden;
}after伪元素
:after是额外标签的升级版，给父元素添加即可：.box-father:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/*IE6、7专有*/
.box-father {
*zoom: 1;
}<style>
.box-father:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/*IE6、7专有*/
.box-father {
*zoom: 1;
}
.box-father {
width: 1000px;
border: 1px solid black;
}
.box-child {
float: left;
width: 100px;
height: 100px;
background-color: aqua;
}
.footer {
height: 30px;
background-color: brown;
}
</style>
<div class="box-father">
<div class="box-child">盒子</div>
<div class="box-child">盒子</div>
</div>
<div class="footer"></div>
双伪元素
.box-father:before,
.box-father:after {
content: "";
display: table;
}
.box-father:after {
clear: both;
}
.box-father {
*zoom: 1;
}声明：1. 本站所有资源来源于用户上传和网络，因此不包含技术服务请大家谅解！如有侵权请邮件联系客服！
2. 本站不保证所提供下载的资源的准确性、安全性和完整性，资源仅供下载学习之用！如有链接无法下载、失效或广告，请联系客服处理！
3. 您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容资源！如用于商业或者非法用途，与本站无关，一切后果请用户自负！
2. 本站不保证所提供下载的资源的准确性、安全性和完整性，资源仅供下载学习之用！如有链接无法下载、失效或广告，请联系客服处理！
3. 您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容资源！如用于商业或者非法用途，与本站无关，一切后果请用户自负！
