`
kabike
  • 浏览: 610803 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

浮动(float)与文档流(normal flow)

    博客分类：
  • html
html 
阅读更多
根据规范来看,float的元素应该脱离文档流才对.
原文说
In the float model, a box is first laid out according to the normal flow, then
taken out of the flow and shifted to the left or right as far as possible.

看下面的代码 
.div2 {
	width: 200px;
	height: 100px;
	float: left;
	border-style: solid;
}

.div3 {
	width: 400px;
	height: 50px;
	background-color: silver;
}

.main {
	width: 650px;
	border: 1px solid;
}

以及 
<body>
	<div class="main">
		<div class="div2">div2</div>
		<div class="div3">div3</div>
	</div>
</body>

FF下很明显可以看出div2已经不在文档流里了,因为div3的布局无视了div2的存在.(尽管div3里的内容是贴着div2的)

IE7则不然,div2依然大摇大摆的在文档流里占据着位置
分享到：
| Excel中利用match函数进行数值存在比较
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    css浮动和定位

    当一个元素被设置为浮动，它会脱离当前的正常流（normal flow），向左或向右移动，直到其边框碰到包含元素的边框或者另一个浮动元素。同时，其他非浮动元素会尝试填补这个空缺。 1. **浮动类型：** - `float: left...

    css浮动(float,clear)通俗讲解经验分享

    首先，浮动的作用是让元素脱离正常的标准流（normal flow），使得其他元素能够环绕这个浮动元素。在CSS中，浮动分为两种类型：`float:left;` 和 `float:right;`。顾名思义，`left` 浮动会让元素向左移动，直到碰到父...

    诱发BFC的原因及处理方案

    元素仍然在当前文档流中，但会影响周围元素的布局。 3. **绝对定位 (absolute positioning)**：绝对定位使元素完全脱离普通流，不再影响其他元素的布局。元素的位置由其绝对定位属性（top, bottom, left, right）...

    浮动从何而来 我们为何要清除浮动 清除浮动的原理是什么

    在CSS中，浮动元素会脱离普通流（normal flow），向左或向右移动，直到其边框接触到包含框或另一个浮动元素的边框。这种特性使得文本和其他非浮动元素可以围绕浮动元素布局，极大地增强了页面设计的灵活性。 然而，...

    DIV+CSS的布局元素.docx

    `static`是默认值，元素遵循正常的文档流。`relative`允许元素相对于其正常位置偏移，而不影响其他元素。`absolute`将元素从正常流中移除，相对于最近的已定位祖先元素或初始包含块定位。`fixed`则使元素相对于...

    浅析CSS--元素重叠及position定位的z-index顺序.pdf

    首先，HTML文档中的元素默认遵循“普通流”（normal flow），即按照它们在文档中的顺序排列。但是，当给元素添加`float`（如`left`或`right`）或`position`（如`relative`、`absolute`或`fixed`）属性时，元素的定位...

    css-box-model-document-flow

    1. **正常流（Normal Flow）**：元素按默认的文档流排列。 2. **浮动（Float）**：通过`float`属性让元素脱离正常流，向左或向右移动，直到其边缘接触到包含它的容器或其他浮动元素的边缘。 3. **绝对定位（Absolute...

    CSS 2.0 中文手册.zip

    - **布局模式**: CSS 2.0 包含流式布局（normal flow）、定位布局（positioning）和表格布局（table model）。 ### 8. 背景与边框 - **背景**: CSS 2.0 允许设置元素的背景颜色、图像、重复方式、位置等。 - **...

    CSS帮助文档大全及网站特效教程

    3. **布局技术**：CSS提供了多种布局模式，如常规流（normal flow）、浮动（float）、定位（positioning）以及现代浏览器支持的Flexbox（弹性盒布局）和Grid（网格布局）。这些布局技术可以实现复杂的网页布局设计。...

    css-layout-and-positioning-css布局与定位

    定位分为正常流（Normal Flow）、浮动（Float）、绝对定位（Absolute Positioning）和固定定位（Fixed Positioning）。 1. 正常流：这是默认的布局方式，元素按照源代码顺序从左到右、从上到下排列。 2. 浮动：通过...

    浅析CSS--元素重叠及position定位的z-index顺序.docx

    在HTML文档中，元素按照它们在文档中的顺序进行布局，这称为普通流（normal flow）。在正常流中，元素不会轻易重叠。但是，当使用CSS的`float`属性或`position`属性改变元素的位置时，元素的布局就会发生变化。 1. ...

    day07（CSS05-定位+装饰）.rar

    CSS提供了多种定位方式，主要分为普通流（Normal Flow）、浮动（Floats）、绝对定位（Absolute Positioning）、相对定位（Relative Positioning）和固定定位（Fixed Positioning）。 1. **普通流**：这是默认的布局...

    百度地图毕业设计源码-xck:前端工作日常总结

    在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。 绝对定位 (absolute positioning) 在绝对定位布局中，元素会整体脱离普通流，因此...

    css中的三种基本定位机制

    首先，普通文档流（Normal Flow）是网页元素默认的布局方式。在这个流中，元素按照其在HTML中的顺序自上而下、从左至右进行排列。块级元素（如`&lt;div&gt;`）会占据一整行的高度，而行内元素（如`&lt;span&gt;`）则会在同一行内...

    css的三种定位方式使用探讨

    1. **普通定位（Normal Flow）**： - 普通定位是HTML元素默认的布局方式，元素按照其在文档流中的顺序依次排列。 - 在普通定位中，元素会占据一定的空间，其他元素会根据这个空间进行布局。 - 示例中的`&lt;div&gt;`...

    TA-STYLE-positioning-content-THaaad

    2. **浮动（Float）**：通过设置`float`属性（如`float: left`或`float: right`），可以让元素脱离正常流，向左或向右移动，直到其边框碰到容器的边框或其他浮动元素。其他非浮动元素会围绕浮动元素排列。 3. **...

    html static布局完美布局支持各种浏览器

    "Static布局"指的是不依赖CSS定位技术如浮动（float）或定位（position）的布局方式，通常基于HTML元素的自然流（normal flow）进行元素的排列。这种布局方式在早期网页设计中十分常见，但在现代网页设计中，为了...

    网页布局入门教程 如何用CSS进行网页布局

    2. 浮动（Floats）：通过设置元素的`float`属性（如`float:left`或`float:right`），可以让元素脱离正常文档流，并允许其他元素环绕它。 3. 绝对定位（Absolute Positioning）：通过设置`position:absolute`，元素...

Magicbox
Global site tag (gtag.js) - Google Analytics