文档流

先说说什么是文档流  流是什么 就是一串连续的东西

 <div style="background-color:pink;width:40px;height:80px;">第一个框 </div>
  <div style="background-color:red;width:40px;height:80px;">第二个框 </div>
  <div style="background-color:yellow;width:40px;height:80px;">第三个框 </div>
  <span>我换行</span>
  <span>我不换行</span>

我们写在html里面的元素 系统会放在数据流里依次读取 按照从左到右从上到下的顺序 放置在页面上

当然在放置的过程中 牵扯到行内元素与块级元素的概念

简单说明一下

块级元素: 如div 每一个div元素占据一行 如果没有设置宽度 就默认放满整行 如果指定了宽度 即使宽度再小 后面的元素也得另起一行放置

行内元素:如span不会换行 举个例子如A是行内元素 后面的元素就放在A的右边而不是下边

浮动

说完了文档流 再说说浮动
在上面的例子里 三个div都是块级元素 一个占一行 可问题是 我就想让他们的布局如下 怎么办

先看代码

  <div style="background-color:pink;width:40px;height:80px;float:left;"></div>
  <div style="background-color:red;width:80px;height:80px;"></div>
  <div style="background-color:yellow;width:40px;height:80px;">	</div>
  <span>我换行</span>
  <span>我不换行</span>

大家看第一行的代码里 多了一个float:left

它的意思就是说让这个元素脱离文档流的限制 把他"浮动"到包裹他的容器的最左边 (此时在文档流里就没有它的存在了)

现在在看 那三个div的宽度参数 深红色的宽度是80 我们只看到了右边的40 左边的40个像素被在文档流之外的粉红色div挡住了

这个图的代码如下

	<div style="float:left;background-color:pink">
			<span>dd</span>
			<select name="general.language">
					<option value="volo">Volvo</option>
					<option value="saab">Saab</option>
					<option value="fiat">Fiat</option>
					<option value="audi">Audi</option>
			</select>
	</div>
	<div style="background-color:blue">LLL </div>
	<div style="background-color:green">  asdf</div>
	<div style="background-color:yellow;" >	ddddd</div>
	<div>	eeee	</div>

如果大家用的是chrome的浏览器打开审查元素会看到

其实蓝色的111div是从顶行放置的  粉红色的div放在它上面 挡住了一部分

(lll asdf 居中打印了 同一段代码在editplus与chrome显示不一样 应该是解释的机制不同吧)

这也符合上面我们说的文档流的理论: 哪个元素有了float属性 就把他取出文档流 而文档流内部的元素就放置在自己应该在的位置上

可问题是我想让asdf也顶行写不行吗?

这就牵扯到float的详细布局方式了 告诉大家一句话

假如某个div元素A是浮动的,如果A元素上一个元素也是浮动的,那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素,那么A元素会被挤到下一行);如果A元素上一个元素是标准流中的元素,那么A的相对垂直位置不会改变,也就是说A的顶部总是和上一个元素的底部对齐。

div的顺序是HTML代码中div的顺序决定的。

靠近页面边缘的一端是前,远离页面边缘的一端是后。

那有另一个问题了,如果a本身不是浮动的呢? 钻牛角尖了吧,如果a不是浮动的,那它就还在文档流里面呗!就是下面这个图的大红色块说明的道理



如果还是不明白,自己敲几行代码,看看效果就ok

分析咱们的页面LLL的前面元素有浮动标签 就把LLL放在前边元素的右边

asdf的上一个元素是LLL 所以asdf就放在LLL的正下方 也就是我们图中的效果

那怎么办?

clear

clear : none | left | right | both

       取值:

       none  :  默认值。允许两边都可以有浮动对象

       left   :  不允许左边有浮动对象

       right  :  不允许右边有浮动对象

       both  :  不允许有浮动对象

clear本身就是清除元素本身的浮动效果的

我们在asdf上加上clear:left就ok了

资料推荐

(下面这个文章 写的远比我的好 我的资料也基本来自这里 大家一定看看)

文档流 css中的float clear与布局的更多相关文章

  1. 文档流 css中间float clear和布局

    文档流 先说说什么是公文流转  什么流 它是一系列连续的东西 <div style="background-color:pink;width:40px;height:80px;&quo ...

  2. css布局与文档流的关系之float(浮动)

    所谓文档流,指元素在排版布局的过程中,元素会自动从左到右,从上到下的流式排列.脱离文档流呢,就是元素打乱了这个排列,或是从排版中拿走. 说到文档流呢,我们先来说一下元素,每个元素呢,都有display ...

  3. 脱离文档流两操作,float和position:absolute的区别

    文档流:将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,块状元素独占一行,内联元素不独占一行: CSS中脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离 ...

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

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

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

    今天来整理一下做网页遇到的问题吧 1.插入背景图片并使图片居于div底部充满整个行. <style> background:url(xxx.jpg) no-repeat; backgrou ...

  6. 前端基础-CSS如何布局以及文档流

    一. 网页布局方式 二. 标准流 三. 浮动流 四. 定位流 一. 网页布局方式 1.什么是网页布局方式 布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式, 比如word,nodpad ...

  7. float 浮动 文档流和文字流区别

    关于float属性的脱离文档流的问题 使用float浮动后,元素虽然会脱离文档流,但还处在文本流的位置当中,所以就不会出现重叠的效果吗? 下面我自己试了一下,给两个DIV分别设置了样式,而只给第一个D ...

  8. 前端(八)—— 高级布局:文档流、浮动布局、流式布局、定位布局、flex布局、响应布局

    高级布局:文档流.浮动布局.流式布局.定位布局.flex布局.响应布局 一.文档流 1.什么是文档流 将窗体自上而下分成一行一行,块级元素从上至下.行内元素在每行中从左至右的顺序依次排放元素 2.本质 ...

  9. HTML元素脱离文档流的三种方法

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

随机推荐

  1. ROS机器人程序设计(原书第2版)补充资料 (玖) 第九章 导航功能包集进阶 navigation

    ROS机器人程序设计(原书第2版)补充资料 (玖) 第九章 导航功能包集进阶 navigation 书中,大部分出现hydro的地方,直接替换为indigo或jade或kinetic,即可在对应版本中 ...

  2. protobuf中的枚举缺省值应该为UNKNOWN

    protobuf中的枚举缺省值应该为UNKNOWN(金庆的专栏)proto3中的枚举值为了与proto2兼容,要求缺省值固定为第1个,值为0.proto2中并没有规定对范围之外的枚举值的处理,而pro ...

  3. premake设置静态运行库

    premake设置静态运行库(金庆的专栏)链接protobuf库时,碰到RuntimeLibrary不匹配:1>libprotobufd.lib(int128.obj) : error LNK2 ...

  4. ELK平台的搭建

    ELK是指Elasticsearch + Logstash + Kibaba三个组件的组合.本文讲解一个基于日志文件的ELK平台的搭建过程,有关ELK的原理以及更多其他信息,会在接下来的文章中继续研究 ...

  5. SpriteKit中为何不要在update方法中测试碰撞

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 我们若要在游戏中做碰撞检测有2种办法,一是利用物理引擎,二是自 ...

  6. 关于Android PullTorefreshScrollview回到顶部实例

    列表滑动下面显示按钮,点击按钮回到顶部的功能,一般scrollview会有滑动监听的事件,通过setOnScrollChangeListener()滑动监听滑动的距离来判断是否显示按钮就好了,但是Pu ...

  7. Android简易实战教程--第二十二话《自定义组合控件模拟qq登录下拉框和其中的一些”小技巧”》

    转载此文章请注明出处:点击打开链接   http://blog.csdn.net/qq_32059827/article/details/52313516 首先,很荣幸此专栏能被CSDN推荐到主页.荣 ...

  8. iOS下JS与OC互相调用(四)--JavaScriptCore

    前面讲完拦截URL的方式实现JS与OC互相调用,终于到JavaScriptCore了.它是从iOS7开始加入的,用 Objective-C 把 WebKit 的 JavaScript 引擎封装了一下, ...

  9. 17 ContentProvider

    1 Loader 转载器 Android3.0以后出来的 它可以使Activity和Fragment 异步加载数据 变得简单(Loader里封装了AsyncTask) 2 Loader特点: 对每一个 ...

  10. TCP连接建立系列 — 客户端发送SYN段

    主要内容:客户端调用connect()时的TCP层实现. 内核版本:3.15.2 我的博客:http://blog.csdn.net/zhangskd connect的TCP层实现 SOCK_STRE ...