CSS浮动分析

CSS浮动分析

1.脱离标准文档流实现

定义：让标签脱离标准文档流的约束限制，独自进行定位设置
约束：一般脱标设置的都是块级元素（内联元素可以脱标，不常用）
实现方式：浮动、绝对定位、固定定位

2.浮动的特性

1>.浮动的元素脱离了标准文档流的约束

2>.浮动的元素相互贴靠

3>.浮动的元素具有字围现象

4>.浮动的元素对后面的元素有影响

3去除浮动影响的方法

1 给父盒子加上高度（项目中不常用）项目中元素基本上是由内容撑起的高度，不会给固定的高低（不推荐使用）

2 给后面的父盒子加上clear:both（浮动清除，但是父盒子的margin失效了：父盒子塌陷了）也不推荐使用。

3 外墙法（在浮动的两个父盒子之间加上一个div，这个div样式为clear:both）这个方法虽然能清楚浮动，也有margin，但是父盒子还是没有高度

4内墙法（在浮动的父盒子最前面或者最后面加上一个div，这个div的样式为clear:both）父盒子有了高度，但是出现了很多无用的div

5 overflow:hidden（给第一个浮动的父盒子加上这个属性。也能清除浮动，意思是溢出盒子的部分隐藏起来）

这种方法，既能清除浮动，又让盒子有了高度，还不会出现莫名其妙的空盒子。