清除浮动的本质
清除浮动元素脱离标准流造成的影响 策略: 闭合浮动,只让浮动在父盒子内部受影响,不影响父盒子外面的其它盒子 浮动演示:<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个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!