脱离文档流的方法&&CSS浮动产生的负面影响及解决办法

https://blog.csdn.net/theLostLamb/article/details/79581984

一、什么是文档流？

将窗体自上而下分成一行一行，并在每行中按从左至右依次排放元素，称为文档流，也称为普通流。

这个应该不难理解，HTML中全部元素都是盒模型，盒模型占用一定的空间，依次排放在HTML中，形成了文档流。

 

二、什么是脱离文档流？

元素脱离文档流之后，将不再在文档流中占据空间，而是处于浮动状态（可以理解为漂浮在文档流的上方）。脱离文档流的元素的定位基于正常的文档流，当一个元素脱离文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。

 

三、怎么脱离文档流？

1：float

使用float可以脱离文档流。

注意！！！：使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在该元素的周围。

举个栗子：

运行效果：

这段代码中把红色的框设置为了左浮，所以红色的框称为了浮动状态（浮动在蓝色框的上面），而蓝色框占用了原来空色框的位置。注意到，蓝色框中的文本依然认为红色框存在，所以为红色框让出了位置。由于div是块状元素，所以456出现在下方。

 

2：absolute

absolute称为绝对定位，其实博主觉得应该称为相对定位，因为使用absolute脱离文档流后的元素，是相对于该元素的父类（及以上，如果直系父类元素不满足条件则继续向上查询）元素进行定位的，并且这个父类元素的position必须是非static定位的（static是默认定位方式）。

举个栗子：

 

运行结果：

通过把蓝色的框的position设置为absolute使蓝色的框变为浮动状态，可以看到绿色的框被蓝色的框遮挡。emmm...，看起来貌似没有问题，但是还记得前面说的absolute是相对谁定位的吗？相对非static元素的父级定位的，这里蓝框的父级就是html，所以应该是相对于html定位，但是代码中没有提供相对位置，所以只能浮动在原来该元素在文档流中的位置上方。

下面加上相对位置并把html以dotted的形式显示出来：

运行结果：

结果很明显，蓝色的框遮住了html的点，所以当父级元素的position全是static的时候，absolute是相对于html来进行定位的。

下面举个相对于父级元素定位的栗子：

运行结果：

嗯，没问题，蓝色的框是相对红色的框进行定位的，具体来说是相对于border。（可以试一下改变红色框的margin和paddind看看会发生什么）。

注意：绝对定位的窗口一般都要设置相对距离，当你同时设置top和bottom的时候，只有top会生效，同理，同时设置left和right的时候，只有left会生效。

3：fixed

完全脱离文档流，相对于浏览器窗口进行定位。（相对于浏览器窗口就是相对于html）。

 举个栗子：

运行结果：

可以很明显的看出，蓝色的框是相对于html进行定位的。当然，如果不提供相对位置的话，蓝色的框会浮动在其原先在文档流中的位置上方。

Note：文档流是在body中的，body在html中，这个在代码结构中也体现出来了，下面的例子可以更直观的看出：

1. 

运行结果：

 

最后说一个半脱离文档流的方法，就是position：relative。下面说明一下为什么是半脱离文档流。

先看下面这段代码：

1. 

运行结果：

可以看到，蓝色的框是浮动了，但是绿色的框却相对于蓝色的框原先在文档流中的位置进行了定位。这就是所谓的半脱离文档流，本体还在文档流中占有位置，但是却可以通过改变位置使其漂浮到其他的地方，其定位方式是相对其原先在文档流中的位置进行定位的。

注意：可以尝试改变蓝色框的margin和padding属性，看一下会发生什么。

关键就是知道蓝色框在原来的文档流占用位置，相对定位后还是在原来的位置占据文档流。（类似实体投影到另一个地方）。

以上就是脱离文档流的方法。

 

http://www.cnblogs.com/xiaonalove/p/3332813.html

一、CSS浮动产生的负面影响

1、背景不能显示
由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。

2、边框不能撑开
如上图中，如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。

3、margin padding设置值不能正确显示
由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

4.未浮动的盒子内文本会围绕浮动盒子显示

浮动的盒子会无视浮动的盒子，假使现有两个盒子，一个浮动一个不浮动，则浮动的盒子会覆盖不浮动的盒子，但是盒子元素里面的文字并不会无视浮动元素，蓝色背景色盒子（未浮动元素）里的文本注意到了这个浮动元素于是在盒子里右推的形式围绕在浮动盒子的周围

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

二、css解决浮动，清除浮动方法

这里DIVCSS5为了统一讲解浮动解决方法，假设了有三个盒子对象，一个父级里包含了两个子级，子级一个使用了float:left属性，另外一个子级使用float:right属性。同时设置div css border，父级css边框颜色为红色，两个子级边框颜色为蓝色；父级CSS背景样式为黄色，两个子级背景为白色；父级css width宽度为400px，两个子级css宽度均为180px，两个子级再设置相同高度100px，父级css height高度暂不设置（通常为实际css布局时候这样父级都不设置高度，而高度是随内容增加自适应高度）。

父级CSS命名为“.divcss5”对应html标签使用“”
两个子级CSS命名分别为“.divcss5-left”“.divcss5-right”

根据以上描述DIVCSS5给出对应CSS代码和HTML代码片段

CSS代码：

1. .divcss5{ width:400px; border:1px solid #F00; background:#FF0} 
2. .divcss5-left,.divcss5-right{ width:180px; height:100px; 
3.  border:1px solid #00F; background:#FFF} 
4. .divcss5-left{ float:left} 
5. .divcss5-right{ float:right} 

对应html源代码片段：

1.  
2.     left浮动

 

    right浮动

 

 

清除浮动前案例截图父级需要清除浮动

以下DIVCSS5总结了几点用于清除浮动的经验教程

1、对父级设置适合CSS高度
对父级设置适合高度样式清除浮动，这里对“.divcss5”设置一定高度即可，一般设置高度需要能确定内容高度才能设置。这里我们知道内容高度是100PX+上下边框为2px，这样具体父级高度为102px

CSS代码：

1. .divcss5{ width:400px;border:1px solid #F00;background:#FF0; height:102px} 
2. .divcss5-left,.divcss5-right{width:180px;height:100px; 
3. border:1px solid #00F;background:#FFF} 
4. .divcss5-left{ float:left} 
5. .divcss5-right{ float:right} 

Html代码不变。得到截图

使用height高度清除浮动

小结，使用设置高度样式，清除浮动产生，前提是对象内容高度要能确定并能计算好。

2、clear:both清除浮动
为了统一样式，我们新建一个样式选择器CSS命名为“.clear”，并且对应选择器样式为“clear:both”，然后我们在父级“

”结束前加此div引入“class="clear"”样式。这样即可清除浮动。

具体CSS代码：

1. .divcss5{ width:400px;border:1px solid #F00;background:#FF0} 
2. .divcss5-left,.divcss5-right{width:180px;height:100px; 
3. border:1px solid #00F;background:#FFF} 
4. .divcss5-left{ float:left} 
5. .divcss5-right{ float:right} 
6. .clear{ clear:both} 

Html代码：

1.  
2.     left浮动