float之脱离文档流
所谓的文档流:指的是元素在排版过程中,元素自动从左到右,从上到下的顺序排列。
脱离文档流:也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位
只有绝对定位absolute和浮动float才会脱离文档流。
使用float脱离文档流时,其他盒子会无视这个元素(完全无视),但其他盒子内的文本依然会为这个元素让出位置,环绕在周围(可以说是部分无视)。
(1)使用float实现文本环绕效果(文字部分无视,此时浮动元素虽然脱离文档流,但任然占据空间)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css"> .text{
width:100px;
height:100px;
background-color: blue;
float:left;
}
</style>
</head>
<body>
<div class="pre">
<span class="text"></span>
文字文字文字文字文字文字文字文字文字
</div>
</body>
</html>
(2) 盒子元素完全无视浮动元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css"> .text{
width:100px;
height:100px;
background-color: blue;
float:left;
}
.bro{
width:200px;
height:200px;
background-color: red;
}
</style>
</head>
<body>
<div class="pre">
<span class="text"></span>
</div>
<div class="bro">
</div>
</body>
</html>
(3) 盒子中的文字部分无视,但盒子本省完全无视
</html> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css"> .text{
width:200px;
height:200px;
background-color: blue;
float:left;
}
.bro{
width:300px;
height:300px;
background-color: red;
}
</style>
</head>
<body>
<div class="pre">
<span class="text"></span>
</div>
<div class="bro">
文字部
</div>
</body>
</html>
而对于使用absolute position脱离文档流的元素,其他盒子与其他盒子内的文本都会无视它。(可以说是完全无视)
float是魔鬼,会影响其他相邻元素;但是clear是小白,其只会影响自身,不会对其他相邻元素造成影响!
常用清除float副作用 :在父元素中的所有子元素的最后添加带有clear:both;属性的元素可以清楚浮动,使得父元素具有高度。
<div style="clear:both;"></div>
注意:对盒子里的元素使用float属性时注意父元素的宽度设置,高度可以设为auto。
float之脱离文档流的更多相关文章
- float,absolute脱离文档流的总结
dom元素脱离文档流,有如下几种方式: 1. float 脱离文档流,其他dom元素无视他,在其下方布局,但是其未脱离文本流,其他元素的文本会认为他存在,环绕他布局.父元素会无视他,因此无法获取其高度 ...
- float的元素脱离文档流,但不完全脱离,只是提升了半层;
float的元素脱离文档流,但不完全脱离,只是提升了半层:
- 脱离文档流两操作,float和position:absolute的区别
文档流:将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,块状元素独占一行,内联元素不独占一行: CSS中脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离 ...
- html/css基础篇——DOM中关于脱离文档流的几种情况分析
所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. ...
- html/css 关于脱离文档流的几种情况
所谓的文档流 顾名思义就是按照顺序流下来,指的是html元素从上往下 从左往右的流式排列, 比如说写了5个Div,正常的文档流是依次显示这5个div块: 脱离文档流就是指它所显示的位置和文档代码就不一 ...
- 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍
01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline ...
- css脱离文档流
作者:张秋怡链接:http://www.zhihu.com/question/24529373/answer/29135021来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出 ...
- 一天搞定CSS: 浮动(float)及文档流--10
浮动(float),一个我们即爱又恨的属性.爱,因为通过浮动,我们能很方便地布局: 恨,浮动之后遗留下来太多的问题需要解决,特别是IE6-7(以下无特殊说明均指 windows 平台的 IE浏览器). ...
- CSS脱离文档流&浮动
什么是文档流? 将窗体从上至下分成一行一行,并在每行中按从左至右依次排放元素,称为文档流,也称为普通流.这个应该不难理解,HTML中全部元素都是盒模型,盒模型占用一定的空间,依次排放在HTML中,形成 ...
随机推荐
- /dev/null 2>&1的意思(可以直接参考shell重定向那篇,/dev/null是空设备)
路还长 别太狂 以后指不定谁辉煌 2>&1 和 &> 的解释 Linux的IO输入输出有三类 Standard Input 代码 0 Standard Output 代码 ...
- Windows下比较简单的获取网页源码的方法
第一个方法是使用MFC里面的 <afxinet.h> CString GetHttpFileData(CString strUrl) { CInternetSession Session( ...
- S3c2440A WINCE平台HIVE注册表+binfs的实现
今天最大的收获莫过于把binfs和hive注册表同时在三星的平台上实现了,这可是前无古人啊(只是看到好多哥们说找不到三星的HIVE资料),哈哈哈.怕今天的成果日后成炮灰,还是写下来比较好,要养成这样的 ...
- ITU-T Technical Paper: NP, QoS 和 QoE的框架以及它们的区别
本文翻译自ITU-T的Technical Paper:<How to increase QoS/QoE of IP-based platform(s) to regionally agreed ...
- Volley网络框架完全解析(缓存篇)
在上一篇中讲完了Volley框架怎么使用,那么这篇就来讲讲Volley框架的缓存机制 我们看Volley内部源码发现: Volley框架内部自己处理了DiskBasedCache硬盘缓存,但是没有处理 ...
- Google官方网络框架Volley实战——QQ吉凶测试,南无阿弥陀佛!
Google官方网络框架Volley实战--QQ吉凶测试,南无阿弥陀佛! 这次我们用第三方的接口来做一个QQ吉凶的测试项目,代码依然是比较的简单 无图无真相 直接撸代码了,详细解释都已经写在注释里了 ...
- 初探linux子系统集之led子系统(一)
就像学编程第一个范例helloworld一样,学嵌入式,单片机.fpga之类的第一个范例就是点亮一盏灯.对于庞大的linux系统,当然可以编写一个字符设备驱动来实现我们需要的led灯,也可以直接利用g ...
- css3-------:before和:after的作用
1.:before和:after的作用就是在指定的元素内容(而不是元素本身)之前或者之后插入一个包含content属性指定内容的行内元素,最基本的用法如下: <!doctype html> ...
- windows安装weblogic和域的建立
Copyright ©2014 Manchester United
- 解决记录:win10 无法安装VS2017,visual studio installer下载进度始终为0
问题描述:win10 下无法安装VS2017,visual studio installer下载进度始终为0,点击取消按钮后,也没有反应,visual studio installer也关闭不掉: 具 ...