float闭合问题

首先,必须知道两件事:

　　1. 浏览器事按照HTML代码中对象声明的先后顺序,以流布局的方式来显示对象的.

　　2. HTML中的所有对象几乎都默认分为两种: block对象和in-line对象. 其中, block默认的显示状态是占据整行; in-line对象则相反,允许其他对象与它在一行中显示.

　　现在来看float属性, 它的作用就是改变block对象的默认显示方式. block对象设置了float属性之后,它将不再独自占据一行.

　　如果有一个div 的属性是float:left,它后面又跟着一个div，这个div就会自动跟在前一个div的后面，跟着浮动，你如果不希望后面的div跟着浮动，你就需要将前一个div闭合，用clear：both。这样不会干扰后面的div。

　　进行网站开发过程中处理页面布局问题的时候总会遇到因为设置float属性的标签而导致的布局错乱的问题。

　　比如说，在一个父级块元素下定义了三个块级子元素，而每个子元素都设置float:left，这时候如果没有对float闭合，就会出现不可预计的后果导致后面的页面布局错乱。

　　 所以对设置了float属性的标签进行闭合十分重要。这里用一种万能闭合方法：

　　在父元素中加入class = “clearfix”，注意是父元素。

　　在css文件中加入以下代码：

.clearfix:after {
content: "";
display: block;
clear: both;
}