1.什么是浮动:CSS中定位的一种。
CSS的定位有：文档流（普通流），浮动，绝对定位
2.为什么我们要清除浮动（闭合浮动）？
清除与闭合的说明:
清除浮动：在CSS中对应clear属性，clear:both;
闭合浮动：使浮动的元素闭合，借此来减少浮动带来的影响。
浮动:浮动的框可以左右移动，直到它的外边缘遇到包含框或者另一个浮动框的边缘
正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。
说明:
未加入浮动：（普通流，子盒子的高度能把父盒子撑起）
我理解的浮动与闭合浮动
加入浮动：(脱离文档流，无法撑起父盒子，导致高度塌陷)
HTML：
<div class="fatherbox">
<div class="left"></div>
<div class="right"></div>
</div>
CSS：
.fatherbox {
width: 400px;
border: 1px solid #ffff00;
background-color: #fff;
}
.left {
width: 100px;
height: 100px;
background-color: #555555;
float: left;
}
.right {
width: 100px;
height: 100px;
background-color: #e92222;
float: right;
}
效果：
我理解的浮动与闭合浮动
3.清除浮动的几种方法：
*（可忽略）本人首先想到的是不就是父盒子塌陷吗？我给他加高不就行啦，还清除啥浮动，后来发现，第一，页面复杂的话，很难算高，或许我可以算，但是一旦页面有一点点的改动，高度还会变化，又要改一次，好吧，我选择放弃这个想法。
1)添加额外的标签（也可称为“隔墙法”），例如在浮动元素末尾加一个<div style=”clear:both”></div>。
代码：
<div class="fatherbox">
<div class="left"></div>
<div class="right"></div>
<div style="clear:both"></div>
</div>
效果：
我理解的浮动与闭合浮动
优点：方便易懂还能完美实现效果。
缺点：在表示语义的HTML中加入不少无意义的空标签，在后面的页面维护中那就是噩梦。
结论：不推荐使用。
2）给父盒子也加上浮动，可操作性太弱，一旦开始，你不加到body很难停手。
3）给父容器加overflow：hidden;样式
代码：
.fatherbox {
width: 400px;
border: 1px solid #ffff00;
background-color: #fff;
overflow: hidden;
}
效果和1）的一致
优点：不存在1）方法的语义问题，代码量也比较少。
缺点：多个的嵌套使用后，在IE，Firefox等一些浏览器中都会有问题
结论：不推荐使用。
4）伪元素：after
<div class="fatherbox clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
.clearfix {
zoom: 1; /*IE6*/
}
.clearfix:after {
content: ".";
height: 0;
clear: both;
display: block;
visibility: hidden;
}
效果同1）
优点：结构和语义化完全正确,代码量居中 缺点：复用方式不当会造成代码量增加
结论：推荐使用
ps:本文是本人初次学习浮动问题的感悟，会有很多不足之处，欢迎大家指正。
网友评论