相信不少程序员在开发时会使用float进行布局，但这样做却往往会导致被作用块脱离文档流，即不占高度，相当于不存在但又会显示，导致各个块级元素挨在一起。为了避免这种这种坍塌现象，在这里我给大家介绍三种避免这种现象的方法：
1.在使用float元素的父级块中添加一句overflow:hidden，作用是使超出父级元素的部分不显示；
2.使用after伪对象；
3.在结束float 设置块样式的后面添加一个宽度和高度均为0像素的块，并设置样式为clear:both(俗称隔板)。
CSS中通过display:inline-block对一个对象指定inline-block属性，可以将对象呈递为内联对象，但是对象的内容作为块对象呈递。
nav {
display: inline-block;
vertical-align: top;
width: 25%;
}
.column {
display: inline-block;
vertical-align: top;
width: 75%;
}在前端布局的时候行级元素总会出现对齐的需要，inline-block确实满足了这种需求，但不足之处是块与块之间总会出现间隙。为什么会出现这种情况？百度上解释是
因为内联及内联块元素之间在HTML中写的换行或者空行会被解析，如何解决？
1.在父元素样式将font-size设置为0px;
2.不写换行和空格，即将标签全部放在一起。缺点是不利于开发者阅读代码。
- position:absolute 究竟是相对于谁绝对定位？
absolute定位准确地说应该是相对于使用了absolute的父元素，如果没有这样的父元素即相对于整个body，所有如果要用到absolute又要相对于父元素进行调整位置，那么只需要为其父元素也加上一句position:absolute;即可实现。如果只设置样式position:absolute;不设置top和left等定位属性，那么元素的位置仍然是原来的位置，如果设置了left而不设置top，那么元素的left应该遵循上面的规则，而top位置还是在原地，即绝对定位的元素不设置水平边距或者垂直边距的时候，位置仍然是原来的水平位置或者垂直位置。