CSS的浮动也是对HTML页面布局的一个常用的方法和手段,通过使用CSS浮动来布局页面可以控制这区块或者图片的位置,使得显示的效果更加人性化。
工具/原料
1
CSS基础知识
2
HTML基础知识
方法/步骤
1CSS浮动和清除 可以看到红色块和蓝色块没有在一行显示,虽然有足够的地方显示。
首先我们来看看将float设置值为none的时候的效果来说明问题,这里新建两个div块,一个背景为红色一个背景为蓝色,具体代码如下:
2CSS浮动和清除 可以看到div1和div2都在同一行了。
从上面的的例子可以看到默认的效果两个块不会在一行显示,如果我们想要这两个在一行上显示该怎么做呢?可以使用浮动来完成工作,具体代码如下:
3CSS浮动和清除 可以看到设置的蓝色的区块是不是自动到右边去了,虽然代码写在第二个位置上的。
除了可以设置左浮动还可以设置右浮动,这里我在添加了一个绿色的框,具体代码如下:
4CSS浮动和清除 是不是可以看到,第三个绿色区块的这个自动在下一行去了。
那么我们将第三个清除浮动是什么样子的呢?
5CSS浮动和清除 具体效果如下图所示,可以看到div1是禁止右边去浮动它。
除了可以设置不允许左边浮动外,还可以设置不允许右边浮动。具体代码如下:
6CSS浮动和清除 可以看到,前面两个都没有浮动,只有最后一个右边浮动了。
还可以设置禁止左右去浮动,具体代码如下:
注意事项
使用设置浮动的时候要仔细
上一篇:css清除浮动float的方法
下一篇:CSS教程 浮动与消除浮动