Css关于浮动造成⽗级塌陷的总结
基础概念
⽂档流：
所谓的⽂档流，指的是元素排版布局过程中，元素会⾃动从左往右，从上往下的流式排列。
脱离⽂档流
脱离⽂档流，也就是将元素从普通的布局排版中拿⾛，其他盒⼦在定位的时候，会当做脱离⽂档流的元素不存在⽽进⾏定位。
⾮完全脱离⽂档流
左右结构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、清除浮动（推荐）
css固定定位

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。