时间:2021-05-08
面布局有两种方式
1)浮动Float
2)定位Position
今天就来一个小小的练习,让大家理解Float的含义
【例子】
要求:
1)两个方块,一个红色#900,一个蓝色#009;
2)红色方块宽度和高度均为200像素,蓝色方块
宽度为300像素,高度为200像素;
3)红色方块蓝的上外边距(margin-top)和左外边距(margin-left)均为20像素;
页面效果如下:
源代码:例子2.rar
大家应该注意到了,虽然红色方块的宽度并不是100%,但是蓝色并未和红色处于同一行,这就是块状元素比较“霸道”的一点,(即使块状元素的宽度不是100%,它也不允许其他元素和他同在一行)为了消除这种“霸权”,让红色和蓝色方块都处在一行,如图
此时就需要拿出我们的利器Float!只需要在红色方块的CSS里面加上“float:left;”,这时候在IE6中可以看到蓝色方块的确跑到红色方块的后面了,并且处于一行了,但是在FireFox中却变成了如下效果:
这时候就需要注意了,FF中如果前面的区域浮动了,后面的那个区域很有可能就会和前面的区域发生重叠并错位。声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
Float(浮动)概念也许是CSS中最让人迷惑的一个概念吧。Float经常被错误理解,而且因为将上下文元素全部浮动导致的可读性、可用性问题备受责难。然而,这些问
Float(浮动)概念也许是CSS中最让人迷惑的一个概念吧。Float经常被错误理解,而且因为将上下文元素全部浮动导致的可读性、可用性问题备受责难。然而,这
通过指定CSS属性float的值,从而使元素向左或向右浮动,然后由后继元素向上移动以填补前面元素的浮动而空出的可用空间。CSS的float属性,作用就是改变块元
什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这
什么是CSS清除浮动?网络上流行的说法是:在非IE浏览器(如Firefox)下,当容器的高度(height)为auto,且容器的内容中有浮动(float为lef