CSS实例教程:div设定float后高宽比不全自动提升

日期:2020-12-10 类型:科技新闻 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序


有关文章内容:https://www.jb51.net/css/divcss⑷952.html
    https://www.jb51.net/css/divcss⑸991.html
原本想把这个题型改动为“闭合波动元素”或“消除波动元素”,但想了1下,還是不改动为好。由于从这个题型大家能够更为非常容易的看出,假如您沒有闭合(消除)波动元素,它将导致的不良影响是-----div的高宽比不可以全自动提升
言归正传
现阶段用来消除“闭合(消除)波动”的方式,关键是1下4种
1.附加标识法
这类方式便是向父器皿的结尾再插进1个附加的标识,并令其消除波动(clear)以撑大父器皿。这类方式访问器适配性好,沒有甚么难题,缺陷便是必须附加的(并且一般是无词义的)标识。
我本人不喜爱这类方式,可是它的确是W3C强烈推荐的方式
<div style="clear:both;"></div>
或应用 <br style="clear:both;" />
2.应用after伪类
这类方式便是对父器皿应用after伪类和內容申明在特定的如今內容结尾加上新的內容。常常的做法便是加上1个“”,由于它较为小不太让人留意。随后大家再运用它来消除波动(闭合波动元素),并掩藏这个內容
这类方式适配性1般,但历经各种各样 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
这类做法便是让父器皿也波动,这运用到了波动元素的1个特点——波动元素会闭合波动元素。这类方法在 IE/Win 和规范适配访问器中都有较好的实际效果,但缺陷也很显著——父器皿不一定想波动就波动的了,终究波动是1种较为独特的个人行为,有时合理布局不容许其波动也很一切正常。
本人并不是很赞同这类做法,可是从dudo最终的总结总能够看出,他仿佛很赞同这类做法