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中,形成 ...
随机推荐
- 《java入门第一季》之参数引用
Java中的参数传递问题: 基本类型:形式参数的改变对实际参数没有影响. 引用类型:形式参数的改变直接影响实际参数. */ class ArgsDemo { public static void ma ...
- Java-ServletContextEvent-ServletContextAttributeEvent
//这是一个事件类用来通知一个web 应用的servlet 上下文的改变 public class ServletContextEvent extends java.util.EventObject ...
- ERP-非财务人员的财务培训教(一.二)------财务基础知识
二.基本财务管理知识 第一节 财务管理基础知识(一) 财务与会计的关系 会计的基础知识 (一) 财务与会计的关系 财务与会计的内涵 1.会计 会计工作主要是解决三个环节的问题: 会计凭证 会计账簿 会 ...
- CIO必看：跨国集团采购部报表系统的建设经验分享
CIO必看:跨国集团采购部报表系统的建设经验分享 引言 福耀集团是国内最具规模.技术水平最高.出口量最大的汽车玻璃生产供应商,产品"FY"商标是中国汽车玻璃行业第一个"中 ...
- C++语言之类class
在现实世界中,经常有属于同一类的对象.例如,你的自行车只是世界上很多自行车中的一辆.在面向对象软件中,也有很多共享相同特征的不同的对象:矩形.雇用记录.视频剪辑等.可以利用这些对象的相同特征为它们建立 ...
- 如何在shell脚本中判断文件或者文件夹是否存在？
1:查找文件夹 如果文件夹存在,则打印一句存在,否则打印不存在 这里的话可以自由加一些指令. if [ test -d 文件夹名称 ] ; then echo "文件夹存在!" e ...
- SharePoint 解决方案手动打包简单介绍
介绍:在使用SharePoint中,我们经常需要做的就是打包解决方案,我们来介绍下SharePoint解决方案的手动部署,我自己觉得,解决方案是SharePoint中非常好的一个功能,部署和使用起来相 ...
- Apache Kafka简介与安装(一)
介绍 Kafka是一个分布式的.可分区的.可复制的消息系统.它提供了普通消息系统的功能,但具有自己独特的设计. 首先让我们看几个基本的消息系统术语: Kafka将消息以topic为单位进行归纳. 将向 ...
- Form 和 Input 对象
更改表单的 action 属性 <html> <head> <script type="text/javascript"> function c ...
- 【抽象那些事】不完整的抽象&多方面抽象&未用的抽象&重复的抽象
不完整的抽象 抽象未支持所有互补或相关的方法时,将导致这种坏味. 为什么要有完整的抽象? 一种重要的抽象实现手法是创建内聚而完整的抽象.抽象未支持相关的方法时,可能会影响抽象的内聚性和完整性.如果抽象 ...