左悬浮
float: left;
右悬浮
float: right;
注意悬浮会
/* 1. 脱离标准文档流
影响: 破坏了布局,导致布局错乱
2.不脱离文本流
*/
/* 规范:
同级之间,加float属性,其余的也要加
*/
溢出隐藏
overflow: hidden;
/* 浮动导致 父级盒子塌陷
解决办法:
1. 父级盒子加高(不能自动撑开,高是固定的,不够灵活)
ul{
height: 102px;
}
2. 父级盒子加 overflow: hidden; (自动撑开,但会导致溢出的部分无法显示)
ul{
overflow: hidden;
}
3. 加一个无内容的空盒子:clear: both;(必须无意义无宽高)
div{
clear: both;
}
4. 父盒子加伪类属性 ::after { content: '';display:block; clear:both}(达到添加无意义空盒子的效果且不受影响)
*/
.clear::after{
content: '';
display: block;
clear: both;
}