css小结：清除float带来的影响
在你使用float属性进行页面布局的时候：例如：
添加css属性：
.container { //因为要通过box撑起container的高度，所以这里不设置height
width: 300px;
border: 1px solid black;
background-color: rebeccapurple;
}
#box {
float: left;
width: 140px;
height: 50px;
}
.div1 {
background-color: red;
}
.div2 {
background-color: blue;
}
.div3 {
background-color: green;
}
.div4 {
background-color: pink;
}
以上代码在页面的显示结果：
当你不知道container里面有多少个box和想要通过box的高度撑起container的高度的时候，你就不能把container的高度写死。这时候你就发现，box根本撑不起container的高度，因为没有高度，所以页面显示的只有container的黑色边框线。
当你在container后面还要添加div的时候：
为container2添加css属性：
.container2 {
width: 400px;
height: 400px;
background-color: yellow;
}
这时候页面的显示情况：
黄色的container2盒子的位置和你想象的就不太一样。因为第一个container盒子并没有高度，所以就出现这种情况。
如果你想要黄色的container2盒子不和container中的子盒子重叠在一起，这个时候，你就要清除浮动带来的影响。
2.为clearfinx书写css样式
.clearfix:after,.clearfix:before {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
这样就container盒子（紫色部分）就有了高度，黄色的container2盒子就不会重叠在一起了!
.container {
width: 300px;
border: 1px solid black;
background-color: rebeccapurple;
overflow: hidden;
}
这样的效果也是和上面一样的
方法三：在container中，在最后面那里添加一个div盒子 1.添加div盒子
//添加div盒子
2.书写clear类样式
.clear {
width: 0;
height: 0;
clear: both;
}
结果如上：
作者：冬天爱吃冰淇淋
相关文章
Laurie
2020-11-30
Pamela
2020-01-20
Thalia
2023-02-26
Olinda
2023-02-26
Bunny
2023-02-26
Kefira
2023-02-26
Jacinthe
2023-02-26
Viridis
2023-02-26
Tertia
2023-02-26
Elina
2023-03-29
Querida
2023-04-14
Serafina
2023-04-19
Rhea
2023-04-19
Malinda
2023-04-19
Kathy
2023-04-19
Nora
2023-04-19
Pandora
2023-04-19
Tani
2023-04-19
Tanisha
2023-04-19
Thalia
2023-05-17