首先先考虑一下什么是普通流?普通流就是正常的文档流,在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>

注:本文转载自他人,为尊重原创附上原文链接:http://www.cnblogs.com/jiqing9006/archive/2012/07/30/2615231.html

posted on
2019-03-23 16:21 
lomon6 
阅读(...) 
评论(...) 
编辑 
收藏

css -html-文档流的更多相关文章

  1. css标准文档流

    css标准文档流 所谓的标准文档流指的是网页当中的一个渲染顺序,就如同人类读书一样,从上向下,从左向右.网页的渲染顺序也是如此.而我们使用的标签默认都是存在于标准文档流当中. 标准文档流当中的特性 空 ...

  2. css脱离文档流

    作者:张秋怡链接:http://www.zhihu.com/question/24529373/answer/29135021来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出 ...

  3. CSS脱离文档流&浮动

    什么是文档流? 将窗体从上至下分成一行一行,并在每行中按从左至右依次排放元素,称为文档流,也称为普通流.这个应该不难理解,HTML中全部元素都是盒模型,盒模型占用一定的空间,依次排放在HTML中,形成 ...

  4. CSS标准文档流 块级元素和行内元素

    标准文档流 什么是标准文档流 宏观的将,我们的web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画 空白折叠现象 ...

  5. CSS定位——文档流定位

    关于CSS的定位机制Ⅰ ㈠概念 对于盒子模型来说,也就是页面元素,这些盒子究竟在页面的什么位置,怎样排列它,那么找到它的位置,确定它的位置,这个就是定位机制所决定的. ㈡分类 文档流, 浮动定位,层定 ...

  6. css 脱离文档流

    一.float <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=&quo ...

  7. html/css基础篇——DOM中关于脱离文档流的几种情况分析

    所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. ...

  8. CSS文档流

    文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不 ...

  9. CSS文档流与块级元素和内联元素

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...

  10. html/css 关于脱离文档流的几种情况

    所谓的文档流 顾名思义就是按照顺序流下来,指的是html元素从上往下 从左往右的流式排列, 比如说写了5个Div,正常的文档流是依次显示这5个div块: 脱离文档流就是指它所显示的位置和文档代码就不一 ...

随机推荐

  1. Access Token 与 Refresh Token【转载哒科普啊】

    Access Token 与 Refresh Token   access token 是客户端访问资源服务器的令牌.拥有这个令牌代表着得到用户的授权.然而,这个授权应该是临时的,有一定有效期.这是因 ...

  2. sql语句实现行转列练习

    create table STUDENT_SCORE( name VARCHAR2(20), subject VARCHAR2(20), score NUMBER(4,1));insert into ...

  3. request.getRealPath为什么会被代替

    以及前两天在网上看到的“不是工程的物理路径封装在Session里 是工程的路径被封装在了ServletContext中的问题” 很抱歉没有找到答案. 只能怪鄙人才识短浅. 在通过这次学习的过程中使我懂 ...

  4. Anatomy of a Database System学习笔记 - 公共模块、结语

    公共模块 1. 使用基于上下文的内存分配器进行内存分配 除了教材里常提到的buffer pool,数据库还会为其他任务分配大量内存,例如,Selinger-style查询优化需要动态的规划查询:has ...

  5. MySQL(索引)

    索引 索引,是数据库中专门用于帮助用户快速查询数据的一种数据结构.类似于字典中的目录,查找字典内容时可以根据目录查找到数据的存放位置,然后直接获取即可. MySQL中常见索引有: 普通索引 唯一索引 ...

  6. 通过shell操作串口

    1. 通过stty工具设置串口参数,例如 stty -F /dev/ttyUSB0 raw speed 9600 -echo min 0 time 10 上例设置了ttyUSB0设备的数据流格式为ra ...

  7. php laravel加密 form表单认证 laravel分页

    use Illuminate\Support\Facades\Crypt; echo Crypt::encrypt(123); //加密echo "<br>";//解密 ...

  8. 9Linux_LVM_iptables

    LVM 创建物理卷 卷组 逻辑卷 格式化 挂载 扩容 缩小 快照 删除逻辑卷

  9. 模拟PLC 的圆弧插补方式在VC中绘制圆弧

    最近同事想让要做一个绘图的控件.VC里面的画弧函数Arc需要提供外接矩形的坐标.同事觉得不好用,他更习惯圆弧插补的那种方式.于是看了看圆弧插补的东西.其实这种画弧方式就是提供圆弧的起点.终点和半径来画 ...

  10. wireshark抓包新手使用教程

    wireshark是非常流行的网络封包分析软件,可以截取各种网络数据包,并显示数据包详细信息.常用于开发测试过程各种问题定位. Wireshark软件安装 软件下载路径:wireshark官网.按照系 ...