关于css脱离标准文档流的两种方式

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">所谓脱离标准文档流</span><span style="background-color: rgb(255, 255, 255); font-family: SimSun; color: rgb(51, 51, 51); font-size: 16px; white-space: pre-wrap;">就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位</span><span style="background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); font-size: 16px; white-space: pre-wrap; font-family: "Microsoft YaHei", arial, "courier new", courier, 宋体, monospace;">。</span>

不浮动的盒子会无视浮动的盒子，假使现有两个盒子，一个浮动一个不浮动，则浮动的盒子会覆盖不浮动的盒子。如下代码的结果所示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>浮动</title><style type="text/css">body{margin:0px;}.first{background-color: #ccc;float:left;width:200px;height:200px;}.second{background-color: blue;width:250px;height:250px;}</style></head>
<body><div class="first"></div><div class="second"></div>
</body>
</html>

结果如图：
盒子元素会无视浮动的元素，但是盒子元素里面的文字并不会无视浮动元素，如下图所示：

可以看到蓝色背景色盒子里的文本注意到了这个浮动元素于是在盒子里右推的形式围绕在浮动盒子的周围。

此外，一旦一个元素浮动了，那么他就可以设置宽高，可以并排，无论原来他是块级元素还是行内元素。当浮动元素里面有文字时，浮动元素不会覆盖文字，文字会围绕浮动元素显示。

关于清除浮动，为什么要清除浮动呢？举一个自己遇到的例子，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>混合布局</title>
<style>
body{ margin:0; padding:0; font-size:10px; font-weight:bold}
div{ text-align:center; line-height:50px}
.head,.main{ width:200px;margin:0 auto;}
.head{ height:100px; background:#F90}
.left{ width:80px; height:60px; background:#ccc;float:left;}
.right{ width:120px; height:60px;background:#FCC; float:right}
.r_sub_left{ width:60px; height:60px; background:#9C3; float:left}
.r_sub_right{ width:60px; height:60px; background:#9FC; float:right;}
.footer{width:400px; height:50px; background:#9F9;margin:0 auto;}
</style>
</head><body>
<div class="head">head</div>
<div class="main"><div class="left">left</div><div class="right"><div class="r_sub_left">sub_left</div><div class=" r_sub_right">sub_right</div></div>
</div>
<div class="footer">footer</div>
</body>
</html>

运行后看到如下结果：

尴尬了，注意到footer的盒子飘到上面去了，只剩下文字孤零零的在下面，这是为什么呢？因为left和right均设置为浮动的状态，而main并没有设置高度，可以想象为一条线在head的下面，这样footer自然无视left和right两个浮动元素然后飘到上面去了，这是我们需要进行float清除，清除的方式有一下几种，如下：清除浮动的方法综合一下答案：
一、clear:both(/left/right);
二、overflow:hidden;width:100%;

三、：after
四、给main设置高度：.main{width:960px; {height:600px};margin:0 auto;}
五、：margin:600px 0 0 0;

详见：http://my.oschina.net/leipeng/blog/221125
推荐使用方法一和方法二，在给footer使用overflow的时候，千万不要忘记设置它的宽度。

其中clear:both清除浮动值描述
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。

overflow 属性规定当内容溢出元素框时发生的事情。
值描述
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

脱离文本的第二种方式是绝对定位（position:absolute):相比于float，position:absolute不管是文本还是盒子都会直接无视掉浮动元素，将float:left换为position:absolute后可以看到如下结果：

关于css脱离标准文档流的两种方式相关推荐

html脱离标准文档流,关于css脱离标准文档流的两种方式
所谓脱离标准文档流就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位. 不浮动的盒子会无视浮动的盒子,假使现有两个盒子,一个浮动一个不浮动,则浮动的盒子会覆 ...
css样式脱离标准文档流
标准文档流指的是元素排版布局过程中,元素会默认自动从左往右,从上往下的流式排列方式.并最终窗体自上而下分成一行行,并在每行中从左至右的顺序排放元素. 元素脱离标注文档流之后,将不再在标准流中占据空间, ...
脱离标准文档流(1)---浮动
浮动标准文档流标准文档流分为三种:块级元素,行内元素. 标准文档流无法做到使两个盒子并排放在一起. 我们可以通过使块状元素或者行内元素转化为行内块元素,来做到将两个和盒子放到一排. 小偏方运用d ...
CSS：标准文档流、浮动、绝对定位—（解决有时候父元素不能自动扩展）
CSS(表现标准语言)的三种定位机制标准文档流:从上到下.从左到右,由块级标签(独占一行div ul li dl dt )和行级元素(同一行显示)组成自动居中 margin:0 auto:设置ma ...
标准文档流、脱离文档流及脱离文档流的3种方式
目录一.标准文档流 1.定义 2.现象二.脱离文档流 1.定义 2.3种方式 (1)浮动 (2)绝对定位absolute (3)固定定位fixed 一.标准文档流 1.定义一个"默认& ...
设置Word文档密码的两种方式
重要的word文档,不想随便被别人打开来看怎么办?那就给它设置一个打开密码吧. Word的设置密码有两种方式: 第一种,打开Word文档后,依次点击上面工具栏的[文件]-[信息],再点击右侧[保护文档 ...
html 浮动脱离文档流,CSS标准文档流与脱离文档流
标准文档流文档流:指的是元素排版布局过程中,元素会默认自动从左往右,从上往下的流式排列方式.并最终窗体自上而下分成一行行,并在每行中从左至右的顺序排放元素. 标准流的微观现象: 空白折叠现象: 在 ...
css中脱离标准流的三种方式,CSS的三种手段让元素脱离标准本文档流
1.浮动浮动是CSS中用到的最多的一个选项,他有三个性质.关于浮动我们要强调一点,永远不是一个东西单独浮动,浮动都是一起浮动,要浮动,大家都浮动. 1.1 浮动元素脱离标准文档流 1.1.1 大概描 ...
继承性和层叠性权重盒模型 padding(内边距) border(边框) margin 标准文档流块级元素和行内元素...
内容总结: 1.继承性和层叠性继承性: 像一些文本的属性: color,text-*,line-*,font-* 这些属性是可以继承下来的2.层叠性就是权重 ,谁的权重大就显示谁的属性如何看权重:就 ...

关于css脱离标准文档流的两种方式

关于css脱离标准文档流的两种方式相关推荐

最新文章

热门文章