div属性

更新时间:2023-04-18 08:37:39 阅读：评论：0

2023年4月18日发(作者：拒绝英文)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 []

Transitional//EN""/TR/xhtml1/DTD/">

/>52CSS

这是第一个DIV

id="content_b">这是第二个DIV

[ 可先修改部分代码再运行查看效果 ]

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

Source Code to Run []

Transitional//EN""/TR/xhtml1/DTD/">

/>52CSS 这是第一个
DIV 向左浮动

这是第二个DIV 不应用浮动

[ 可先修改部分代码再运行查看效果 ]

我们看在IE6中的效果：

我们看在FF中的效果：

在IE中，对content_a应用向左的浮动后，content_a向左浮动，content_b在水平方向仅跟着它的后
面。
在FF中，对content_a应用向左的浮动后，content_b在水平方向容器不可见，只留下了文字。这是由
于未清除浮动所造成的现象，关于清除浮动，可以参考这里：
/?id=132 （overflow:au儿歌集锦 to;）这就是IE与FF对此种情况的不同
解决，我们在英语小故事带翻译实际布局中，应该避免这样的情况发生。

我们同时对这两个容器应用向左的浮动看看发生的现象。
Source Code小复式楼 to Run []

Transitional//EN""/TR/xhtml1/DTD/">

/>52CSS
这是第一个DIV 向左浮动

这是第二个DIV 向左浮动

本文发布于:2023-04-18 08:37:39，感谢您对本站的认可！

本文链接：https://www.wtabcd.cn/fanwen/fan/89/835456.html

下一篇：敬业的成语

留言与评论（共有 0 条评论）