HTML--高度塌陷(css)几种小技巧

解决办法

1.在高度塌陷的父div里面加一个div:

<div id="a">

<div id="a1">

</div> <div id="a2">

</div>

<div style="clear: both;"></div>//加一个标签,清除浮动

</div>

优点:适合初学者,兼容性 强。 
缺点:代码不简练,不利于优化。

2.overflow + zoom方法

#a{ background: red;

/*第二种方法*/

overflow: hidden;

zoom:1; }

优点:兼容性强。 
缺点:对margin属性会有影响,不能设负值,会被裁掉。负值绝对定位也不可以。

3.after + zoom方法(绝杀)

#a{ background: red; zoom:1; }

#a:after{ display: block;

content: '.';

clear:both;

line-height: 0;

visibility: hidden; }

优点:通用,兼容性强 
缺点:不好记。

posted @ 2018-08-22 15:17  Sueing  阅读(1003)  评论(1编辑  收藏  举报
[URL=https://info.flagcounter.com/X5yY][IMG]https://s05.flagcounter.com/map/X5yY/size_s/txt_000000/border_CCCCCC/pageviews_0/viewers_0/flags_0/[/IMG][/URL]