css浮动与清除浮动

css浮动

1. 浮动：float:left/float:right
1. 标准流（文档流）：元素按部就班按照自身的特性排列。
2. 浮动：元素会脱离标准普通流的控制，移动到指定位置的过程
3. 结论（浮动的特征）：
1. 浮动后的元素会脱离标准流，漂浮在其他没有浮动的盒子上边
2. 浮动后的元素不占有原来的位置
3. 浮动后的两个块状元素会在同一行显示
4. 浮动后的元素不会超出父元素的范围
5. 浮动后的元素自动的转化为行内块元素
6. 浮动后的元素不超过父元素的内边距

遇到的问题;

浮动元素引起的问题

答：多个浮动起的元素是无法撑开父元素的宽度，父元素的高度可能会变成0。

还有若浮动元素前面还有同级元素没有浮动则会影响页面结构

2、清除浮动

1. 清除浮动 ： 清除浮动所带来的影响，并不是真正的清除浮动。
2. 为什么要清除浮动？

   　　　　　　 浮动后的元素不会撑开父元素的高度，因为浮动是不占位置的。

　　　　　　3、如何清除浮动：

1. 额外标签法：在浮动元素的后边加上标签
1. <div ></div>    
2. 清除左浮动 clear: left
3. 清除右浮动 clear: right
4. 清除左右浮动 clear: both  
5. 优点：通俗易懂，书写方便
6. 缺点：添加了额外的标签，结构化差
2. overflow 属性：在父元素中添加
1. overflow: hidding;
2. overflow:scroll;
3. overflow:auto;
4. 优点：代码简洁
5. 缺点：盒子中多余的内容会被隐藏掉
3. 使用 after 伪元素清除浮动：在父元素中添加
1.   .____::after { content:' ';display:block;clear:both;}
2. 优点：符合闭合浮动思想、结构语义话正确
3. 缺点：IE6-7 不支持 :after
4. 双伪元素清除浮动：给父元素添加 after 以及 before 伪元素
1.   .____::after, .____::before { content: ' ';display: table;clear: both;}
2. 优点：代码简洁
3. 缺点：IE6-7 不支持 :after