第一篇博客,请大家多多指教!
今天我浅谈对网页编写css中清除浮动几种方法,众所周知在网页编写中,在遇到内容左右布局时,我们必须要使用浮动才能使元素左右排列,而这时
当我们需在下面的网页中继续布局时,浮动就会给下面的元素带来影响,就需要使用清除浮动了。
清除浮动作为每一个Web前端必须掌握的技能,在逆战班学习中我想说说我对不同清除浮动方法的理解和使用方式,下面来介绍一下几种清除浮动的
方法:1.当解决上下排列的情况时,利用clear清除float,具体值为:right、left、both;我在使用中通常都是用both,因为它可以清除左右浮动影响,
相对而言比较方便,同时此方式只能给块元素增加,这点需要格外注意;
2.解决嵌套情况时:a.固定宽高,给父元素增加宽高可以避免给后面元素带来影响,但是我们知道,网页编写完成后后续还会根据变化改变网页内容,
这时宽高一旦固定影响自适应效应,修改维护会非常麻烦,因此逆战班老师不推荐我们使用;b.父元素浮动,这种会给后面的元素带来影响,也不推
荐;c.用BFC规范中overflow:hidden;,给父元素中加上,我们知道这种真正意义为溢出隐藏,当在网页编写中我们遇到需要子元素溢出显示出,这时
这种办法就无法满足我们的需求了;d.display:inline-block;与父元素浮动一样也会给后面的元素带来影响;e.设置空标签利用css样式中的clear:both清
除浮动,让父级div能自动获取到高度。缺点:网页中浮动元素用的比较频繁,利用此种方式确实可以解决问题,但代码中会多出很多标签,造成代码
冗余且影响美观,此种办法为以前主要清除浮动的使用方式,现在各大公司使用较少;f.给父元素div添加一个class,定义伪类:after{content:“”;
clear:both;display:block;},是目前推荐的使用方法,并且是各大公司主流解决清除浮动的办法,也是我在网页编写时css reset的固定写法,在
需要用到清除浮动时,只用父元素添加一个class类名就行。
以上就是我目前所掌握解决清除浮动的办法,只是我个人理解相信之中肯定有不足之处,大家可以互相交流,肯定会有更多浮动的解决方式,期待在
IT届向更多技术大牛学习。
原文地址:https://www.cnblogs.com/zhanglei154636/p/12349302.html