CSS浮动、定位、父容器塌陷问题

　　怎么说呢，从接触前端起，到现在已经有三个月了，这么长时间的学习呢，我的水平依然一般，前几天参加了IFE2017，下面总结一下对CSS中浮动、定位、分列布局、父容器塌陷问题的一些心得。

　　首先，浮动和定位是CSS中布局的基础，通过浮动和定位，可以实现对每一个盒模型精确到像素级别的控制，可见其重要性。

　　先谈谈浮动：

　　在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、如果是分两列布局，可以同时对两个盒子应用浮动来进行布局，可以设定左右两个盒子自己的宽度或者是宽度百分比。

　　2、同样是分两列布局，也可以对左边的盒子应用左浮动布局，对右边的盒子应用定位或者设置它的margin值来定位。

　　3、对于三列布局，最好采用浮动加定位的方法，对于左右两侧的盒子进行浮动处理，对于中间元素（盒子）进行设置其左右margin来实现定位。

　　必须明白的是，浮动这一伟大的创举，可能会导致父容器塌陷，也就是说，当容器内的全部元素浮动（会导致父容器高度为零）或者内部不浮动的元素不足以撑起父容器时，父容器高度会为0或者不足以满足我们对页面布局的要求，那么，我们必须想一些办法来解决这儿问题，我这有几个办法：

　　1、给父容器设置一个高度

　　2、设置父容器overflow：hidden或者overflow：auto；

overflow:hidden;
overflow:auto;

 

　　3、设置父元素浮动（不推荐）

　　4、设置空元素对其（clearfix：both）

　　5、给父元素应用以下样式:

.clearfix:before,
.clearfix:after
{
    content:"";
    display:table;
}
.clearfix:after
{
    clear:both;
}

　　总结来说，对于给网页中元素的布局，经常需要浮动和定位一起来用，综合起来，方能达到我们需要的效果。

　　以上就是我这段时间来对于CSS定位、浮动的一些小小体会，可能会有错误在里面，希望大家可以给我提出来，方便我们大家一同进步，总结这些东西，看了许多大佬的文档，所以很多东西借鉴了大佬的意见，说出来自己的一些理解，同时加深自己对其间知识体悟理解。希望大家在前端之路上一同努力，每天都有进步！

更多CSS浮动、定位、父容器塌陷问题 相关文章请关注PHP中文网！