首先先考虑一下什么是普通流?普通流就是正常的文档流,在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. (转)GraphicsMagick、命令行使用示例

    GraphicsMagick是从 ImageMagick 5.5.2 分支出来的,但是现在他变得更稳定和优秀,GM更小更容易安装.GM更有效率.GM的手册非常丰富GraphicsMagick的命令与I ...

  2. 关于Chrome 67 以后版本无法离线安装扩展的解决方法

    升级了Chrome,突然发现扩展管理页面有问题—— 无法离线安装扩展,拖拽crx文件至该页面,Chrome竟然一直提示“无法从该网站添加应用,扩展程序和用户脚本”. 如图: 谷歌自Chrome 67版 ...

  3. python slenium 中CSS定位

    以百度为例 一.通过id.class定位 1.#id:python:driver.find_element_by_css_selector('input#kw') 2..class:python:dr ...

  4. css中的定位属性

  5. Target JRE version (1.7.0_79) does not match project JDK version (java version "1.8.0_171"), will use sources from JDK: 1.7

    IDEA不会自动匹配系统的JDK环境.如果在IDEA里面没有配置JDK,那么运行程序时就会报错 之前碰到这个问题卡了一下 顺手记录一下 出现此错误说明IDE中配置的jdk版本和你使用的jdk版本不一致 ...

  6. openstack创建虚拟流程、各组件介绍

    登录界面或命令行通过RESTful API向keystone获取认证信息. keystone通过用户请求认证信息,并生成auth-token返回给对应的认证请求. 界面或命令行通过RESTful AP ...

  7. Mac安装Python3后,如何将默认执行的Python2改为Pyhton3

    Mac 笔记本电脑系统自带的Python版本一般是Python 2.7,如果安装了Python 3.x,在终端中输入python命令后,输出的信息还是Python 2.7,问题就是如何将Mac系统默认 ...

  8. java面试题复习(六)

    51.实现多线程的方法 一种是继承Thread类:另一种是实现Runnable接口.两种方式都要通过重写run()方法来定义线程的行为,推荐使用后者,因为Java中的继承是单继承,一个类有一个父类,如 ...

  9. 开源小程序CMS网站, JeeWx-App-CMS 1.1 版本升级发布,持续更新!

    JeeWx-App-CMS开源小程序CMS网站,持续更新ing~ JeeWx-App-CMS 是jeewx开发的小程序网站开源项目,基于小程序wepy语言,具备cms网站的基本功能,能够打造简单易用的 ...

  10. Centos7】hostnamectl 设置主机名

    Centos7中提供了设置主机名的工具 hostnamectl hostname有三种状态 static(永久) transient(瞬态) pretty (灵活) 查看主机名状态 [oracle@h ...