DIV CSS布局 CSS浮动float属性详解

发布 2019-09-02 10:09:20 阅读 7714

div css布局:css浮动float属性详解。

在传统的**布局中,我们对**应该对齐方式对实现了对布局的应用,而应用web标准构建网页以后,float浮动属性是布局中非常重要的属性,我们常常通过对div元素应用float浮动来进行布局,不但对整个版式进行规划,也可以对一些基本元素如导航等进行排列。

我们来看看float属性基本释义:

该属性的值指出了对象是否及如何浮动。当该属性不等于none引起对象浮动时,对象将被视作块对象(block-level),即display属性等于block。也就是说,浮动对象的display特性将被忽略。

float属性的参数:

none:对象不浮动。

left:对象浮在左边。

right:对象浮在右边。

下面我们通过一些测试来了解可能出现的一些情况,如果float取值为none则不会发生任何浮动,块元素独占一行,紧随其后的块元素将在新行中显示,如下图:

我们看下面的运行效果:

source code to run [

这是第一个div

这是第二个div

可先修改部分**再运行查看效果 ]

我们对content_a应用向左的浮动。而content_b不应用任何浮动。

source code to run [

这是第一个div 向左浮动。

这是第二个div 不应用浮动。

可先修改部分**再运行查看效果 ]

我们看在ie6中的效果:

我们看在ff中的效果:

在ie中,对content_a应用向左的浮动后,content_a向左浮动,content_b在水平方向仅跟着它的后面。

在ff中,对content_a应用向左的浮动后,content_b在水平方向容器不可见,只留下了文字。这是由于未清除浮动所造成的现象,关于清除浮动,可以参考这里: (overflow:

auto;)这就是ie与ff对此种情况的不同解决,我们在实际布局中,应该避免这样的情况发生。

我们同时对这两个容器应用向左的浮动看看发生的现象。

source code to run [

这是第一个div 向左浮动。

这是第二个div 向左浮动。

可先修改部分**再运行查看效果 ]

在ie中的效果如图:

在ff中的效果如图:

在ie与ff中,他们的效果基本取得了一致。在布局中,我们可应用这类ie与ff兼容的方法。

我们对content_b应用向左的浮动。而content_a不应用任何浮动。看看是何效果:

source code to run [

这是第一个div 不应用浮动。

这是第二个div 向左浮动。

可先修改部分**再运行查看效果 ]

在ie中的效果如图:

在ff中的效果如图:

在ie与ff中均未有太大的变化。在ie中,应用浮动后的content_b却造成了一个双边距的buy。汗一个先。关于ie的双边距buy请参考这里:

向左浮动会出现何种状态呢?在向右浮动后,最大的变化就是在html中,前面的元素在最右边,后面的元素跑到了最左边。

我们对上面**中的两个元素同时应用向右的浮动看看效果。

source code to run [

这是第一个div 向右浮动。

这是第二个div 向右浮动。

可先修改部分**再运行查看效果 ]

在ie中的效果如图:

在ff中的效果如图:

同时对两个元素应用向右的浮动基本保持了一致,但请注意方向性,第二个在左边,第一个在右边。

对于其它页面构成元素,浮动的原理基本是一样的,大家多动手测试,才能有更进一下的认识。学习css就是多动手,多写**,必有收获!

CSS语法

基本语法。一个样式 style 的语法由三部分构成 selector 中文叫选择器有点怪怪的,就用英文吧 属性 property 属性值 value selector 举个例子,下面的 p就是selector,color就是属性,blue就是属性值。p html中所有的tag都可以作为selecto...

CSS语法

基本语法。一个样式 style 的语法由三部分构成 selector 中文叫选择器有点怪怪的,就用英文吧 属性 property 属性值 value selector 举个例子,下面的 p就是selector,color就是属性,blue就是属性值。p html中所有的tag都可以作为selecto...

CSS语法

未来不是固定在那里等你趋近的,而是要靠你创造。可能有人会问,css还有语法?是的,它不属于任何编程语言类型,但它有自己规定的格式以及规范,只有了解这些规范你才能写出更简洁 易懂的css。网页设计师们应力求写出的css有更好的可读性,更规范的书写,更小的体积,这是初学者们应该要明白的。css 语法由三...