(转)CSS 浮动 -css中,文档流是什么?

原文链接:http://www.cnblogs.com/jiqing9006/archive/2012/07/30/2615231.html

普通流就是正常的文档流,在HTML里面的写法就是从上到下,从左到右的排版布局。

例:

<div id=”01”></div><div id=”02”></div><div></div>

很显然这是最普通的文档流,从左到右,一个挨一个按照顺序01先,02其次,03最后排列。

一旦给其中的某个DIV进行FLOAT属性或者absolute定位(不包括static/relative,这两个依然保持正常的文档流),则它完全脱离文档流,不占空间。

例:

为了能更好辨认,我分别给01绿色,02灰色,03黄色。然后再给01左浮动。结果,01脱离了文档流,完全不占空间,所以02顺势顶替了01原来的位置,结果02被01盖住了。

同理,absolute定位跟FLOAT一样,脱离了文档流,不再占原来文档流的空间了。再举一个大家在日常经常遇到的问题来印证—高度自适应

反复想一想,高度自适应的原理其实就是这个:

<div id=”a”>

<div id=”b”>这是b</div>

<div id=”c”>这是c</div>

</div>

这个结构是a包住b和c,颜色不变,a的高度为自动,b的高度为100,C的高度为500。b和c都为左浮动。

很明显a没有被撑开了。原因是它们浮动了就不再占空间了。既然没有空间可占,那就等于容器里没有东西,所以不撑开。解决办法是在黄色DIV的后面加个DIV,然后清除浮动。让他有空间可占,自然就撑开了。试试!

清除后的效果:

 

浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

CSS 浮动

请看下图,当把框 1 向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘:

再请看下图,当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消失。

如果把所有三个框都向左移动,那么框 1 向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框。

如下图所示,如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间。如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”:

行框和清理

浮动框旁边的行框被缩短,从而给浮动框留出空间,行框围绕浮动框。

因此,创建浮动框可以使文本围绕图像:

要想阻止行框围绕浮动框,需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none,它表示框的哪些边不应该挨着浮动框。

为了实现这种效果,在被清理的元素的上外边距上添加足够的空间,使元素的顶边缘垂直下降到浮动框下面:

这是一个有用的工具,它让周围的元素为浮动元素留出空间。

让我们更详细地看看浮动和清理。假设希望让一个图片浮动到文本块的左边,并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。您可能编写下面的代码:

.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

这种情况下,出现了一个问题。因为浮动元素脱离了文档流,所以包围图片和文本的 div 不占据空间。

如何让包围元素在视觉上包围浮动元素呢?需要在这个元素中的某个地方应用 clear:

不幸的是出现了一个新的问题,由于没有现有的元素可以应用清理,所以我们只能添加一个空元素并且清理它。

.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

.clear {
  clear: both;
  }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>

CSS clear 属性

定义和用法

clear 属性规定元素的哪一侧不允许其他浮动元素。

时间: 2024-10-13 07:50:14

(转)CSS 浮动 -css中,文档流是什么?的相关文章

Css问题 margin float 文档流 背景图底部充满

今天来整理一下做网页遇到的问题吧 1.插入背景图片并使图片居于div底部充满整个行. <style> background:url(xxx.jpg) no-repeat; background-position:bottom; background-size:100%; </style> 属性: background-position:背景位置属性用于设置背景图像的位置,这个属性只能应用于块级元素和替换元素.其中替换元素包括img.input.textarea.select. 语法

css排版之-标准文档流

position:static(静态定位) 当position属性定义为static时,可以将元素定义为静态位置,所谓静态位置就是各个元素在HTML文档流中应有的位置 podisition定位问题.所以当没有定义position属性时,并不说明该元素没有自己的位置,它会遵循默认显示为静态位置,在静态定位状态下无法通过坐标值(top,left,right,bottom)来改变它的位置. position:absolute(绝对定位) 当position属性定义为absolute时,元素会脱离文档流

浮动与清除浮动、标准文档流(重点)

什么是标准文档流 宏观的将,我们的web页面和ps等设计软件有本质的区别,web 网页的制作,是个"流",从上而下 ,像 "织毛衣".而设计软件 ,想往哪里画东西,就去哪里画 标准文档流下 有哪些微观现象? 1.空白折叠现象 多个空格会被合并成一个空格显示到浏览器页面中.img标签换行写.会发现每张图片之间有间隙,如果在一行内写img标签,就解决了这个问题,但是我们不会这样去写我们的html结构.这种现象称为空白折叠现象. 2.高矮不齐,底边对齐 文字还有图片大小不

23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&

文档流 css中的float clear与布局

文档流 先说说什么是文档流  流是什么 就是一串连续的东西 <div style="background-color:pink;width:40px;height:80px;">第一个框 </div> <div style="background-color:red;width:40px;height:80px;">第二个框 </div> <div style="background-color:yel

文档流 css中间float clear和布局

文档流 先说说什么是公文流转  什么流 它是一系列连续的东西 <div style="background-color:pink;width:40px;height:80px;">第一个框 </div> <div style="background-color:red;width:40px;height:80px;">第二个框 </div> <div style="background-color:ye

页面标准文档流、浮动层、float属性(转)

CSS float 浮动属性介绍 float属性:定义元素朝哪个方向浮动. 1.页面标准文档流.浮动层.float属性 1.1 文档流 HTML页面的标准文档流(默认布局)是:从上到下,从左到右,遇块(块级元素)换行. 1.2 浮动层 浮动层:给元素的float属性赋值后,就是脱离文档流,进行左右浮动,紧贴着父元素(默认为body文本区域)的左右边框. 而此浮动元素在文档流空出的位置,由后续的(非浮动)元素填充上去:块级元素直接填充上去,若跟浮动元素的范围发生重叠,浮动元素覆盖块级元素.内联元素

三种可视化格式模型:普通文档流、相对定位与绝对定位、浮动

在CSS中是有三种定位机制的:普通文档流.浮动和绝对定位.在未指定其它两种定位机制的情况下,所有框都是在普通文档流中定位的. 普通文档流: 普通文档流,顾名思义,就是根据块级元素的标签在HTML里的顺序,像水流一样,从上至下.当然对于行内元素而言,还是在一行中水平排列的. 这里插入一个积累的小知识点. 行内元素可 以在水平(内间距.边框.外边距)方向上修改它们水平尺寸,但是在垂直方向上对行内元素的高度是毫无影响的,还有就是直接定义行内元素的 width/height也是毫无影响.对与行内元素来说

认识CSS中布局之文档流、浮动、定位以及叠放次序

前端之HTML,CSS(七) CSS CSS布局的核心就是盒子的摆放,即CSS定位.而CSS中定位机制分为:普通流(nomal flow).浮动(float).定位(position). 普通流 普通流又被称为文档流或者标准流,普通流是指网页内标签元素正常情况下会按照自上而下,自左向右按顺序排列.即块级元素独占一行,多个块级元素存在会自上而下顺序排列,多个行内元素会共占一行,自左向右排列. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 &l