CSS定位的方式与后遗症

CSS中的五种定位方式

一、普通文档流定位（元素默认的定位方式）

块级元素垂直布局：div、hn、table、ul等元素会按照它本身的标准文档流方式进行排列布局；
行内元素不独占一行 ：行列块元素可以设置宽高，内联元素无法设置宽高；

二、浮动定位(float：脱离文档流的定位方式)

浮动引发的特殊效果：
1、 如果在父元素不设置高度的情况下，父元素的高度将会出现所谓的塌陷，本身应该排在被浮动元素后，面的元素就会向上挤压，占据被浮动元素原来的位置；
2、文本、行内元素、采取环绕式布局不会被浮动元素压在底下，巧妙的避开了浮动元素；
3、父元素的宽度显示不下所有的浮动子元素时，最后一个元素将换行；
4、元素一旦浮动起来之后 ，将变成行内块级元素 内联元素影响最大 ；

解决浮动带来影响的方法：
1、最简单，直接的方法就是盒子大小写死，给每个盒子设定固定的width和height，直到合适为止，这样的好处是简单方便，兼容性好，适合只改动少量内容不涉及盒子排布的版面，缺点是非自适应，浏览器的窗口大小直接影响用户体验；
2、给父盒子添加overflow属性，但是这样有可能出现滚动条影响美观（不推荐使用）。代码如下：

 #w