原文地址：浮动与清除浮动
浮动
浮动的概念
浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。
float：left | right | none | inherit
举个栗子:
- 当框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘。
- 当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，框2填补了它的位置且被覆盖，使框 2 从视图中消失。
- 如果把所有三个框都向左浮动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
浮动的特性
- 脱离文档：元素设置为浮动后脱离文档流，并不占据空间，而此浮动元素在文档流空出的位置，由后续的非浮动元素填充，块级元素直接填充上去，内联元素则有空隙就插入。
- 浮动可以内联排列：浮动会向左/向右浮动，直到碰到另一个浮动元素为止，这是浮动可以内联排列的特征。也就是说，浮动可以设置宽高，并且能够一行多个，类似于inline-block属性的效果。
- 父元素高度坍塌：浮动元素脱离了文档流，并不占据文档流的位置，自然父元素也就不能被撑开，所以没了高度。
清除浮动
清除浮动的概念
在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。
举个栗子：
html：
<div class="out">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
css：
.out{
width: 300px;
border: 2px solid #55a532;
}
.box{
background-color: #f7c942;
height: 50px;
width: 50px;
}
上面是未设置浮动时的效果，下面我们给容器里面的子元素设置向左浮动：
.box{
background-color: #f7c942;
height: 50px;
width: 50px;
float: left;
}
我们可以看到，子元素设置浮动后父元素只剩下了重合后的边框，这是因为元素脱离了文档流，不能撑开父元素，所以父元素的高度坍塌了，而子元素也溢出到容器外面，这就是浮动溢出现象。要消除这个现象就得清除浮动。
清除浮动的方法
方法一：添加带clear属性的空元素
clear 属性规定元素的哪一侧不允许其他浮动元素。
clear ：left | right | both | none | inherit
我们给浮动元素后面添加一个空元素
<div class="out">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="none"></div>
</div>
给空元素设置clear属性
.none{
clear: both;
}
原理是设置clear后，父容器必须考虑非浮动子元素的位置，而后者肯定出现在浮动元素下方，所以显示出来，父容器就把所有子元素都包括进去了
另外，如果浮动元素后面存在着不浮动的块元素，那么直接给后者添加clear: both属性即可，不必添加空元素多此一举。
方法二：after伪元素
after伪元素可以在父容器的尾部自动创建一个子元素，也就是说我们不必修改html，可以直接通过css来添加新元素，达到跟上一种方法同样的效果。
.out:after {
content: "";
display: block;
height: 0;
clear: both;
}
.out{
zoom: 1;
}
- content属性，表示伪元素的内容,设置:before和:after时必须设置其content属性，否则伪元素就不起作用，本例content: ""表示给父元素结尾放了一个空白字符。
- after添加的内容默认是inline元素，但是行内元素会找空隙插入浮动元素，依然撑不起父容器高度，所以我们需要把插入的元素设置成块元素block。
- height: 0是让这个这个空白字符不显示出来。
- 由于IE6不支持after，我们添加一条IE6的独有命令"zoom:1"就行了，这条命令的作用是触发父元素的"hasLayout"属性（即令hasLayout的值为true），让父元素拥有自己的布局，IE6会读取这条命令，其他浏览器则会直接忽略它。 （haslayout为true时，它就不得不去渲染它自己，因此元素不得不扩展去包含它的流出的内容，例如浮动，而zoom:1是最常用，最安全，成本最少的触发hasLayout的方式。）
方法三：父元素设置overflow: auto/hidden
给浮动元素的父元素添加overflow: auto或者overflow: hidden属性之后会自动计算超出的大小，所以父容器会自动撑开自己把所有的子元素放进去，浮动元素也回到了容器层，达到了清理浮动的效果。但是如果子元素的大小超过父容器的大小，就会出现显示问题,不推荐使用。
.out{
overflow: auto;
zoom: 1; /*处理ie6兼容问题*/
}
方法四：父元素设置浮动
给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，也容易出现新的浮动问题，不推荐使用。
.out{
float: left;
}
方法五：父元素设置display:table
将父容器变成表格可以清除浮动，但是非表格内容用table来装，不符合标签语义化要求，还可能会出现未知问题，故不推荐使用。
.out{
display: table;
}
小结
据说浮动诞生的时候主要是用来实现文字围绕图片的效果，但是后来越来越多的人用它来布局，虽说存在的即合理的，用浮动布局确实有它的道理和好处，但是对我来说，我还是不太喜欢用浮动来布局，绝对定位也是一样，他们总给我一种不安全感，让我觉得我的页面不是一个整体，随时都有可能崩坏。总之打好基础才是做出一个稳定页面的前提，道阻且长。
网友评论