html5种页面浮动,网页的布局方式之清除浮动

盒子的高度问题

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