让DIV设置Float后高度不自动增加

让DIV设置Float后高度不自动增加内容简介：本来想把这个题目修改为闭合浮动元素或清除浮动元素，但想了一下，还是不修改为好。因为从这个题目我们可以更加容易的看出，如果您没有闭合(清除)浮动元素，它将造成的后果是-----div的高度不能自动增加。言归正传，本来想把这个题目修改为“闭合浮动元素”或“清除浮动元素”，但想了一下，还是不修改为好。因为从这个题目我们可以更加容易的看出，如果您没有闭合(清除)浮动元素，它将造成的后果是-----div的高度不能自动增加。

　　言归正传

今朝用来断根“闭合(断根)浮动”的体例，主若是一下四种：

1.    额外标签法

这种体例就是向父容器的末尾再插入一个额外的标签，并令其断根浮动（clear）以撑年夜父容器。这种体例浏览器兼容性好，没有侍趵硎题，错误谬误就是需要额外的（而且凡是是无语义的）标签。
我小我不喜欢这种体例，可是它确实是W3C举荐的体例

<div style="clear:both;"></div>
或者使用

<br style="clear:both;" />

2. 使用after伪类

这种体例就是对父容器使用after伪类和内容声明在指定的此刻内容末尾添加新的内容。经常的做法就是添加一个“点”，因为它斗劲小不太惹人注重。然后我们再操作它来断根浮动（闭合浮动元素），并潜匿这个内容。
这种体例兼容性一般，但经由各类 hack 也可以应付分歧浏览器了，同时又可以保证html 斗劲清洁，所以用得仍是斗劲多的。

以下为引用的内容：
#outer:after{
     content:".";
     height:0;
     visibility:hidden;
     display:block;
     clear:both;
}

3.    设置overflow为hidden或者auto

这种做法就是将父容器的overflow设为hidden或auot就可以在尺度兼容浏览器中闭合浮动元素.
不外使用overflow的时辰，可能会对页面默示带滥暌拱响，而且这种影响是不确定的，你最好是能在多个浏览器上测试你的页面

4. 浮动外部元素，float-in-float

这种做法就是让父容器也浮动，这操作到了浮动元素的一个特征——浮动元素会闭合浮动元素。这种体例在 IE/Win 和尺度兼容浏览器中都有较好的效不美观，但错误谬误也很较着——父容器未必想浮动就浮动的了，事实下场浮动是一种斗劲非凡的行为，有时结构不许可其浮动也很正常。