float 浮动详解

浮动(float):浮动原先设定时主要是用于文本环绕图像设定的，后来发现其在css布局中有很大的帮助，故渐渐使用浮动。

浮动后的元素脱离了文档的普通流，使得浮动的元素不占据文档的位置，其他元素可以覆盖其位置。

浮动元素不影响块框元级元素布局，但是可以影响内联元素（主要是文本）布局。（即浮动元素不占据文档流位置，不影响其他元素布局，但是浮动元素的内联元素如：文本等会改变其布局）

如图：块1浮动，块2 没有浮动，其位置在块一处（被覆盖：浮动元素不占据文档流位置），但是其内联的文本却在其原本的位置（浮动元素的内联元素布局改变）。

浮动的文本环绕：文本的位置会占据#A的位置，但是其文本会始终环绕在浮动元素A附件。

1. #A {
2. float:left;
3. width:200px;
4. height:200px;
5. background:#C00;
6. }
7. #B {
8. width:480px;
9. height:230px;
10. 10.     background:#000;

浮动的弊端（高度塌陷）：  如果父元素只包含浮动元素，且父元素未设置高度和宽度的时候，那么它的高度就会踏缩为零。

浮动的删除：1.clear:both  ----如果浮动较多，会有很多<div class=’clear’></div>

2.在容器中使用overflow：auto或者hidden

3.给浮动的容器也添加浮动 float -------这样会使容器也带有浮动，影响整体布局

4.使用伪类元素 :after  在其容器中添加新样式 -------推荐使用，可复用性高

<div class="container clearfix">

        <div class="block1"><span>块1</span></div>

        <div class="block2"><span>块2</span></div>

        <div class="block3"><span>块3</span></div>

    </div>

.clearfix:after{

content:".";

display:block;

height:0;

clear:both;

visibility:hidden;

}