清除浮动

浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

 直观展现：如果有一个DIV作为外部容器，内部的DIV如果设置了float样式，则外部的容器DIV不能被撑开

设置overflow的一个更流行的用处是，清除浮动。设置overflow并不会在该元素上清除浮动，它将清除自己(self-clear)。意思就是，应用了overflow(auto或hidden)的元素，将会扩展到它需要的大小以包围它里面的浮动的子元素(而不是叠了起来(collapsing))，假设未定义高度。

如果使用overflow进行清除浮动操作时，由于overflow还有隐藏超出内容的功能，所以当父元素指定了宽度时，此时一般是隐藏功能。

 

例子：

<div style=”background:#666;”> 

<div style=”float:left; width:30%; height:40px;background:#EEE; “>Some Content</div> 

</div> 

此时预览此代码，我们会发现最外层的父元素float container,并没有显示。这是因为子元素因进行了浮动，而脱离了文档流，导致父元素的height为零。

 

父元素的子元素进行了浮动，不占文档流，此时该父元素没有内容，自然不会显示

 

清除浮动并不是清理自身的浮动的效果~而是清理上面接触到的浮动元素的浮动~

使浮动元素后面的元素不接受它们的浮动~按照正常的元素流进行布局

 

浮动不是针对使用float元素来的，而是针对由于元素使用了float对其父元素的其他子元素进行了干扰，清除浮动的意思是使得这些受影响的子元素按之前不适用float时采用的文档流方式，不会出现重叠现象，父元素也会相应的被撑大。

 

 

<style>

.clearfix:after {

 visibility:hidden;

 display:block;

 font-size:0;

 content:" ";

 clear:both;

 height:0;

}

.clearfix {

 zoom:1;

}

</style>

 

<div class="clearfix"style="background:#666;"> 

<div style="float:left; width:30%; height:40px;background:#EEE;overflow:auto">Some Content</div> 

</div> 

</div> 

 

 

遇到的问题：

form套form，里面的form不会被浏览器解析，会被忽略掉，也不可以提交