文档流 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:yellow;width:40px;height:80px;">第三个框 </div> <span>我换行</span> <span>我不换行</span>
我们写在html里面的元素 系统会放在数据流里依次读取 按照从左到右从上到下的顺序 放置在页面上
当然在放置的过程中 牵扯到行内元素与块级元素的概念
简单说明一下
块级元素: 如div 每一个div元素占据一行 如果没有设置宽度 就默认放满整行 如果指定了宽度 即使宽度再小 后面的元素也得另起一行放置
行内元素:如span不会换行 举个例子如A是行内元素 后面的元素就放在A的右边而不是下边
浮动
先看代码
<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与布局的更多相关文章
- 文档流 css中间float clear和布局
文档流 先说说什么是公文流转 什么流 它是一系列连续的东西 <div style="background-color:pink;width:40px;height:80px;&quo ...
- css布局与文档流的关系之float(浮动)
所谓文档流,指元素在排版布局的过程中,元素会自动从左到右,从上到下的流式排列.脱离文档流呢,就是元素打乱了这个排列,或是从排版中拿走. 说到文档流呢,我们先来说一下元素,每个元素呢,都有display ...
- 脱离文档流两操作,float和position:absolute的区别
文档流:将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,块状元素独占一行,内联元素不独占一行: CSS中脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离 ...
- html/css基础篇——DOM中关于脱离文档流的几种情况分析
所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. ...
- Css问题 margin float 文档流 背景图底部充满
今天来整理一下做网页遇到的问题吧 1.插入背景图片并使图片居于div底部充满整个行. <style> background:url(xxx.jpg) no-repeat; backgrou ...
- 前端基础-CSS如何布局以及文档流
一. 网页布局方式 二. 标准流 三. 浮动流 四. 定位流 一. 网页布局方式 1.什么是网页布局方式 布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式, 比如word,nodpad ...
- float 浮动 文档流和文字流区别
关于float属性的脱离文档流的问题 使用float浮动后,元素虽然会脱离文档流,但还处在文本流的位置当中,所以就不会出现重叠的效果吗? 下面我自己试了一下,给两个DIV分别设置了样式,而只给第一个D ...
- 前端(八)—— 高级布局:文档流、浮动布局、流式布局、定位布局、flex布局、响应布局
高级布局:文档流.浮动布局.流式布局.定位布局.flex布局.响应布局 一.文档流 1.什么是文档流 将窗体自上而下分成一行一行,块级元素从上至下.行内元素在每行中从左至右的顺序依次排放元素 2.本质 ...
- HTML元素脱离文档流的三种方法
一.什么是文档流? 将窗体自上而下分成一行一行,并在每行中按从左至右依次排放元素,称为文档流,也称为普通流. 这个应该不难理解,HTML中全部元素都是盒模型,盒模型占用一定的空间,依次排放在HTML中 ...
随机推荐
- 【安卓开发】Android系统中Parcelable和Serializable的区别
http://greenrobot.me/devpost/android-parcelable-serializable/ 进行Android开发的时候,我们都知道不能将对象的引用传给Activiti ...
- Python中使用rrdtool结合Django进行带宽监控
我们有个网关需要做下带宽监控,能获取这个数据的唯一方法就是登录到管理界面查看.然后咱就写了个模拟登录的爬虫,定时抓取数据用rrdtool存储,最后通过Django来展示.这里就涉及了python的rr ...
- 安卓高仿QQ头像截取升级版
观看此篇文章前,请先阅读上篇文章:高仿QQ头像截取: 本篇之所以为升级版,是在截取头像界面添加了与qq类似的阴影层(裁剪区域以外的部分),且看效果图: 为了适应大家不同需求,这次打了两个包,及上图 ...
- (九十七)集成JPush实现远程通知和推送的发送
上节介绍了通过直接和APNS交互实现推送的方法,较为繁琐,最为重要的是发送推送需要特定的服务端,通过JPush,不仅可以简化客户端的接收,还可以通过控制台或者API实现通知的发送. 首先注册JPush ...
- 05_NoSQL数据库之Redis数据库:Redis的常用命令,键值相关命令和服务器相关命令
Redis常用命令 Redis提供了丰富的命令对数据库和各种数据库类型进行操作,这些命令可以再Linux终端使用. 键值相关命令: Keys:返回满足给定pattern的所有key 用表达式*表 ...
- 03 EditText文本编辑框
二 EditText 文本编辑框 父类: TextView >概念:文本编辑框 可以进行文本编辑 android:textColor="#00f&qu ...
- java 判断是否是周末
package untitled7; import java.util.Date; import java.text.SimpleDateFormat; import java.util.Calend ...
- Scipy教程 - 统计函数库scipy.stats
http://blog.csdn.net/pipisorry/article/details/49515215 统计函数Statistical functions(scipy.stats) Pytho ...
- 小试ImageMagik——使用篇
===================================================== ImageMagick的使用和开发的文章: 小试ImageMagik--使用篇 小试Imag ...
- gcov 统计 inline 函数
gcov 统计 inline 函数 (金庆的专栏) gcov可以统计 inline 函数,可是实际使用中碰到统计次数总是为0的现象. 假设类A的头文件为 A.h, 实现文件为 A.cpp. A 有几 ...