清除浮动
方法1:在浮动元素后面增加空白元素用上clear:both
清除浮动 - 锐客网 .box {
background-color: #2AB561;
border: 1px solid red;
}.one {
width: 100px;
height: 50px;
background-color: #0DA5D6;
float: left;
}.two {
float: left;
width: 100px;
height: 50px;
background-color: #1b6d85;
}.three {
width: 200px;
height: 100px;
background-color: #0f0f0f;
}
.four{
clear: both;
}【清除浮动】方法2:父级添加overflow：hidden
清除浮动 - 锐客网 .box {
background-color: #2AB561;
border: 1px solid red;
/*overflow触发BFC，BFC可以清除浮动*/
overflow: hidden;
}.one {
width: 100px;
height: 50px;
background-color: #0DA5D6;
float: left;
}.two {
float: left;
width: 100px;
height: 50px;
background-color: #1b6d85;
}.three {
width: 200px;
height: 100px;
background-color: #0f0f0f;
}方法3:添加伪元素
清除浮动 - 锐客网 .box {
background-color: #2AB561;
border: 1px solid red;
}.one {
width: 100px;
height: 50px;
background-color: #0DA5D6;
float: left;
}.two {
float: left;
width: 100px;
height: 50px;
background-color: #1b6d85;
}.three {
width: 200px;
height: 100px;
background-color: #0f0f0f;
}.clearFloat:after {
/*避免有空隙*/
content: '.';
/*变成块级元素*/
display: block;
/*隐藏content*/
visibility: hidden;
clear: both;
/*清除盒子高度*/
height: 0;
}.clearFloat {
/*兼容IE6，7*/
*zoom: 1;
}方法4:双伪元素清除浮动
清除浮动 - 锐客网 .box {
background-color: #2AB561;
border: 1px solid red;
}.one {
width: 100px;
height: 50px;
background-color: #0DA5D6;
float: left;
}.two {
float: left;
width: 100px;
height: 50px;
background-color: #1b6d85;
}.three {
width: 200px;
height: 100px;
background-color: #0f0f0f;
}.clearFloat:before ,.clearFloat:after {
/*避免有空隙*/
content: '';
/*变成块级元素*/
display: table;
}
.clearFloat:after{
clear: both;
}.clearFloat {
/*兼容IE6，7*/
*zoom: 1;
}推荐阅读
- 对抗抑郁最好的方法
- 怎样用黑谜速冻膜去黑头，|怎样用黑谜速冻膜去黑头， 最有效的去黑头的方法看这!
- 移动端h5调试方法
- 唱歌教学（导致嗓音损坏的几个常见的错误唱歌方法！）
- 拆书方法训练营
- 数组常用方法一
- 这份史上最经典的3大学习方法，清华北大学霸都在用！
- 迅捷流程图制作软件的使用方法！
- VueX--VUE核心插件
- 15个从现实焦虑中恢复精神的方法！