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;
}