div+css浮动布局怎么用
Div+css布局在网页设计中很常见，而布局中也经常会用到浮动（float）这个属性，那么div+css怎样浮动布局呢？一起来学习一下吧！
操作方法
- 01
首先，在一个新的HTML文件里面书写一个id为box的div，这个box作为最大的容器，并且里面存放了两个子div，分别是box1和box2。
- 02
然后我们来设置box的样式，这里我就设置成宽高400像素，并且我设置它的背景颜色为红色，这样方便我们待会观察布局。
- 03
如图，这就是box容器在网页中的展现效果。
- 04
接着我们再来设置box1的宽度和高度为150像素，背景颜色为蓝色。
- 05
之后，再来预览效果，可以看到，蓝色的box1靠在红色的box里面。
- 06
接着我们再来设置box2的属性，我这里设置为宽200像素，高150像素，背景颜色为黄颜色。
- 07
这样，三个div的颜色都设置好了，我们来看看效果。 可以看到蓝色的div和黄色的div是垂直排列的，而我们想要让它水平排列怎么办呢？这就需要用到float这个属性了。
- 08
如图，我们可以给box1和box2添加float属性，并且让它们都左浮动（left）。
- 09
接着再来看看设置浮动属性之后的div。可以看到蓝色div和黄颜色的div都在同一水平线上了。
- 10
或者我们也可以给box1设置左浮动（left），然后box2设置右浮动（right）。
- 11
这样，蓝色div就会浮动到左边，而黄颜色的div就会浮动到右边。总而言之，浮动布局非常方便灵活，要灵活使用。
赞 (0)