基础概念
文档流：
所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。
脱离文档流
脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。
非完全脱离文档流
左右结构div盒子重叠现象，一般是由于相邻两个DIV一个使用浮动一个没有使用浮动。一个使用浮动一个没有导致DIV不是在同个“平面”上，但内容不会造成覆盖现象，只有DIV形成覆盖现象。
主要内容
让元素脱离文档流的方式有两种：浮动和定位
在HTML的文档对象模型里，采用的是流式布局，也就是说，块级元素是独占一行的，想让块级元素并排，主要是两种办法，一种是在CSS里设置块级元素的display为inline-block。但是很多时候并不适合用这种办法，更多时候我们会采用浮动的办法。
浮动，主要有两种float：left；和float：right；浮动可以让块级元素脱离标准文档流，可以理解成为定义了浮动的元素，就要向所定义方向去移动，直到被阻挡住或者碰到了父容器边界。如果当行剩宽度不足，那么所浮动的盒子，就会浮动到下一行。浮动为实现页面布局提供了一种解决方案。
但是，不能忽略的是，有时候通过简简单单的浮动不能达到我们对界面布局的需求。这时候定位的重要性就体现了出来，定位可以分为四种：relative（相对定位）、absolute（绝对定位）、fixed（固定定位）、static。当我们不对元素应用定位属性时，就相当于static。
那么，如何理解relative定位呢？应用了relative定位的元素（盒子模型）不脱离标准文档流，可以对它设定top、left、right、bottom值，实现对元素（盒子模型）相对于原来位置的微调，top即元素相对于原来的位置下移（可以设定负值，作用相当于设置正值bottom），left是元素相对于原来的位置右移。相同的，right为左移，bottom是上移。
absolute定位：应用了absolute定位的元素会脱离文档流，好像它从来没有存在过，这时它的定位是相对于他的应用了relative定位的祖先元素而言的。而且它还有一个很重要的特性：就是会根据设定的位移值实现“跨越”，什么意思呢？就是说，对其设定top、left、right、bottom是相对于他的祖先元素（盒子）的边界而言的。如果对其设定哪个位移方向，此元素（盒子）会先移动到那个方向的边界，然后相对于边界去移动。
fixed定位：fixed定位同样是脱离了标准文档流，不过他是相对于浏览器的窗口而言的，不会随着滚动条或者是界面的移动而改变，同样可以设定top、left、right、bottom值。
浮动是伟大的，但是会造成父级坍塌，也就是说，当容器内的全部元素设定为浮动或者内部不浮动的元素不足以支撑父级时，父级的高度不满足我们对页面布局的要求。
针对页面浮动造成的父级坍塌主要有以下几种方法：
1、固定高度
给父标签添加一个高度，或者增加一个固定高度的子div；
但是这样限定固定高度会使页面操作不灵活，不推荐
2、清除浮动（推荐）
clear语法：
clear : none | left | right | both
取值：
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
但是需要注意的是：clear属性只会对自身起作用，而不会影响其他元素。
3、父级标签overflow
overflow:hidden;
overflow:auto;
4、利用伪类
.clearfix:after { <----在类名为“clearfix”的元素内最后面加入内容； content: "."; <----内容为“.”就是一个英文的句号而已。也可以不写。 display: block; <----加入的这个元素转换为块级元素。 clear: both; <----清除左右两边浮动。 visibility: hidden; <----可见度设为隐藏。注意它和display:none;是有区别的。 visibility:hidden;仍然占据空间，只是看不到而已； line-height: 0; <----行高为0； height: 0; <----高度为0； font-size:0; <----字体大小为0； }
注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。