CSS摆放盒子方式

标准模式

块级元素 从上而下
例如:div hr p h1-h6 ul ol dl form table

行内元素 从左到右 碰到父元素边缘自动换行
例如:span a i em

标准模式缺点

inline-block 可以实现 让div存在于一行上
但是会出现 空白缝隙问题 这个空白缝隙在调试时会出现 兼容性差 并且难以计算的问题
并且实现左右对齐时 也会存在计算问题 因为中间有空白缝隙 兼容性差

float(浮动)

让盒子从普通情况中 浮起来 可让多个块级盒子一行显示

如何实现浮动

使用浮动后 套用浮动的元素 会脱离标准模式的控制 移动到指定的位置

作用：
可以让div水平排列
可以实现左右对齐 等其他操作

来源是word中让文字环绕图片的这种操作

float
属性	说明
none 不浮动	默认属性 处于标准控制中
left 元素左浮动	元素会直接定位至容器最左侧 脱离原先的标准控制
right 元素右浮动	元素会直接定位至容器最右侧 脱离原先的标准控制

浮动元素关系解释

两个盒子关系	位置变化
当a元素浮动 b元素不浮动时 (同级关系)	a会覆盖b元素(a在b上方)
当a元素 为 b元素 的父元素时 b浮动 (父子级关系)	b会在a内部浮动 但不会脱离a的限制 初始的位置受限于宽度高度以及边框内边距
当a元素浮动 b元素浮动 (同级关系)	a与b会同时在一个容器内 无空隙排列 顶部对齐
当a元素不浮动 b浮动 (同级关系)	位置与写标准情况时 相同 不会存在任何变化(若b没有设置高度 后方元素就会产生变化)

浮动只会影响后方元素 不会影响前面的因素 注意这里说的是 元素的高度宽度都给了的情况

书写建议：如果一个盒子内 有多个子盒子 其中一个盒子浮动 其他兄弟也应该浮动
防止出现不必要的麻烦

清除浮动

浮动主要的目的是让多个块级元素在一行中显示

当父元素不方便给高度时a为父元素容器盒子 b为新闻展示盒子 c为广告元素盒子
当a作为父盒子时 因新闻页面中新闻内容字数未知 所以
解决此问题时 需要让 b子盒子 有多少就显示多少自动撑开容器 同样的c也该如此在标准模式下 确实如此 实际情况就是孩子多高 父亲就会多高
但 b盒子与c盒子 添加浮动后 a作为父盒子因为没有高度 就会消失

清除浮动是为了解决父元素因子元素浮动引起内部高度为0的问题
清除浮动后 父元素会自动侦测子元素的高度 获取子元素中最高元素的高度 从而不会影响其他布局

清除浮动方法

额外标签法(隔墙法)

在浮动元素末尾添加一个空标签

例如<div style="clear:both;"></div>或其他标签<br>给一个具体宽度(非常不推荐 没解决实际问题)隔墙法解决问题:
<div class="a"><div class="b"></div><div class="c"></div><div style="clear:both;"></div>
</div>

优点:通俗,书写方便
缺点:添加无意义标签，结构化差

父级添加overflow属性方法

a{overflow:hideen;	(隐藏滚动条)overflow:auto;		(自动显示滚动条)overflow:scroll;	(上下滚动条和左右滚动条都显示)}
这三种方法都能实现清除浮动	

优点：代码简洁
缺点：因为是添加的滚动条来存储 内容增多的时候容易造成不会自动换行导致内容被隐藏
无法显示需要溢出元素

例如你设置的内容就是要超出限制的 在设置滚动条后 就会存在本来想显示的显示不了的情况
并且你要设置的不是隐藏的话 就会多个滚动条样式 忒难看

父级使用after伪元素清除浮动

首先需要声明伪元素 .clearfix(此处可取任意名字):after{content:"";display:block;height:0;visibility:hidden;clear:both;
}
.clearfix{*zoom: 1;
} 兼容ie6,7版本(ie6和ie7不识别伪元素)

后在父级标签中调用
<div class="a clearfix"><div class="b"></div><div class="c"></div>
</div>

优点：对于结构没有任何大影响 只需要在标签中添加类名来调用
缺点：代码相对复杂，但这个缺点可以忽略
(百度，网易，淘宝)都是这么用的

父级使用双伪元素清除浮动

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

后在父级标签调用样式
<div class="a clearfix"><div class="b"></div><div class="c"></div>
</div>

优点：代码看似少了
缺点：除了不支持ie6和ie7 基本没缺点
(小米，腾讯)是这么写的

position(定位)

将盒子 固定在浏览器的 某个位置 加入js特效后效果显著