1回答

Steve007

2019-03-10

同学，你好。

文档流也就是标准流是相对于盒子模型讲的

文本流是相对于文子段落讲的

元素浮动之后，会让它跳出文档流，也就是说当它后面还有元素时，其他元素会无视它所占据了的区域，直接在它身下布局。但是文字却会认同浮动元素所占据的区域，围绕它布局，也就是没有拖出文本流。

但是绝对定位后，不仅元素盒子会拖出文档流，文字也会出文本流。那么后面元素的文本就不会在认同它的区域位置，会直接在它后面布局，不会在环绕。
当然你可以使用 index-z 来让底部的元素到上面来，类似于一个图层的概念。

清除浮动的方法：

　方式一:使用overflow属性来清除浮动

先找到浮动盒子的父元素，再在父元素中添加一个属性：overflow:hidden,就是清除这个父元素中的子元素浮动对页面的影响.　　

方式二:使用额外标签法

　　　　.clear{

　　　　　　clear:both;

　　　　　}

　　　　在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响.

　　　　　　a.内部标签：会将这个浮动盒子的父盒子高度重新撑开.

　　　　　　b.外部标签：会将这个浮动盒子的影响清除，但是不会撑开父盒子.

　方法三:使用伪元素来清除浮动(after意思:后来,以后)

　　　　.clearfix:after{

　　　　　　content:"";//设置内容为空

　　　　　　height:0;//高度为0

　　　　　　line-height:0;//行高为0

　　　　　　display:block;//将文本转为块级元素

　　　　　　visibility:hidden;//将元素隐藏

　　　　　　clear:both//清除浮动

　　　　　}

　　　　.clearfix{

　　　　　　zoom:1;为了兼容IE

　　　　}

祝学习愉快！

0