盒子的高度问题
1.标准流中盒子的高度可以被内容高度撑起来;
2.浮动流中浮动的内容不能撑起盒子的高度;
为什么要清楚浮动?
相邻的盒子之间,如果前面的盒子没有高度,那么后面盒子中的浮动元素就会去找前面盒子中的浮动元素,这样会导致界面混乱,所以需要清除浮动;
清除浮动方式一:
解决方案:
给前面一个父元素设置高度
注意点:
在企业开发中,我们能不写高度就不写高度,所以这种方式用得很少;
CSS:
*{
margin:0;
padding:0;
}
.box1{
height:20px;//给前面盒子设置高度
background-color:red;
}
.box2{
background-color:green;
}
.box1p{
width:100px;
background-color:blue;
}
.box2p{
width:100px;
background-color:yellow;
}
p{
float:left;
}
body:
我是文字1
我是文字1
我是文字1