当时使用浮动想做一个这样的效果时
往往会得到一个这样的效果
问题在于你没有清除浮动
浮动的元素会脱离标准流,浮动的盒子不再保留原先的位置
1.额外标签法也称隔墙法,是W3C推荐的做法。
在浮动元素末尾添加一个空的标签<div style="clear:both"></div>,或者其他标签如<br>
2.父级添加overflow属性
overflow:hidden 缺点:无法显示溢出的部分
3.父级添加after伪元素 本质是额外标签法的升级
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6、7专有 */
*zoom: 1;
}
4.父级添加双伪元素
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.top {
/* 方法1 */
/* 父级添加该代码,清除浮动 */
/* 缺点:无法显示溢出的部分 */
/* overflow: hidden; */
}
/* 方法3
* 父级添加after伪元素
*/
/* .clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
} */
/* IE6、7专有 */
/* .clearfix {
*zoom: 1;
} */
/* 方法4 */
/* 父类添加双伪类 */
/* .clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
} */
.top div {
background-color: bisque;
width: 200px;
height: 200px;
float: left;
}
.footer {
height: 300px;
background-color: brown;
}
</style>
</head>
<body>
<div class="top clearfix">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<!-- 方法2 -->
<!-- 隔墙法,清除浮动 新添加的标签必须是块状元素,不能是行内元素-->
<!-- <br style="clear: both;" /> -->
</div>
<div class="footer"></div>
</body>
</html>
该笔记是由黑马程序员的pink老师所整理,后被引用,如有侵权联系删除。