博客主要围绕前端清除浮动展开。先阐述了清除浮动的原因，如避免footer位置异常。接着介绍了清除浮动的方法，包括额外标签法（新增盒子需为块级元素）、父级添加overflow、:after伪元素以及双伪元素等。
一 为什么清除浮动
fotter跑上面去了
<style>
.box {
width: 800px;
border: 1px solid blue;
margin: 0 auto;
}
.damao {
float: left;
width: 300px;
height: 200px;
background-color: purple;
}
.ermao {
float: left;
width: 200px;
height: 200px;
background-color:pink;
}
.footer {
height: 200px;
background-color: black;
}
</style>
</head>
<body>
<div class="box">
<div class="damao">大毛</div>
<div class="ermao">二毛</div>
</div>
<div class="footer"></div>
</body>
二 清除浮动
三 清除浮动方法
1.额外标签法
新增的盒子必须是块级元素
<style>
.box {
width: 800px;
border: 1px solid blue;
margin: 0 auto;
}
.damao {
float: left;
width: 300px;
height: 200px;
background-color: purple;
}
.ermao {
float: left;
width: 200px;
height: 200px;
background-color:pink;
}
.footer {
height: 200px;
background-color: black;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="box">
<div class="damao">大毛</div>
<div class="ermao">二毛</div>
<div class="clear"></div>
</div>
<div class="footer"></div>
</body>
2 父级添加overflow
3. ：after伪元素
4 双伪元素
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
