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

所谓脱离标准文档流就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。

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

浮动

body{

margin:0px;

}

.first

{

background-color: #ccc;

float:left;

width:200px;

height:200px;

}

.second

{

background-color: blue;

width:250px;

height:250px;

}

结果如图：

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

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

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

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

混合布局

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;}

head

left

sub_left

sub_right

footer

运行后看到如下结果：

尴尬了，注意到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后可以看到如下结果：