CSS中的float属性是一个频繁用到的属性，对于初学者来说，如果没有理解好浮动的意义和表现出来的特性，在使用的使用很容易陷入困惑，云里雾里，搞不清楚状态。本文将从最基本的知识开始说起，谈谈关于浮动的应用，出现的问题和解决方案。
float，顾名思义就是浮动，设置了float属性的元素会根据属性值向左或向右浮动，我们称设置了float属性的元素为浮动元素。
float的详细细节
在说明float带来的详细细节之前，我们首先要了解一个概念。
包含块：浮动元素的包含块就是离浮动元素最近的块级祖先元素，前面叙述的例子中，div.box就是span元素的包含块。
了解完包含块的概念之后，首先要说明的浮动元素的第一个特性：不管一个元素是行内元素还是块级元素，如果被设置了浮动，那浮动元素会生成一个块级框，可以设置它的width和height，因此float常常用于制作横向配列的菜单，可以设置大小并且横向排列.
最后来总结一下浮动的特征吧
1.脱离文档流
2.不脱离父级
3.浮动元素对后续布局有影响，会浮动后续元素上，但不会覆盖其文本内容
4.浮动元素遇到父元素边界或者上一个浮动元素旁边即停止浮动
5.浮动之后的元素将会具有行内块元素的特征
如何清除浮动呢，下面提供三种方法
1.清除浮动只能用块元素，一般用div清除，清除浮动的div写在浮动元素后面
例如：<div class="clear"></div>
2.让父类元素跟着一起浮动，但不建议，因为影响布局
3.通过伪类选择器清除浮动，以下三种属性缺一不可
例如： id名/class名:after{
display:block;
content:"";
clear:both;
}
网友评论