让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 和尺度兼容浏览器中都有较好的效不美观,但错误谬误也很较着——父容器未必想浮动就浮动的了,事实下场浮动是一种斗劲非凡的行为,有时结构不许可其浮动也很正常。

  个人不是很赞成这种做法,但是从dudo最后的总结总可以看出,他好像很赞成这种做法.

发布者

小懿

RingCentral敏捷教练 不懂技术的产品经理不是好教练!

发表评论

邮箱地址不会被公开。 必填项已用*标注