我的第一篇博客--css 清除浮动
2021-06-03 12:03
标签：方式 溢出 就会 完成 ali 很多 line 个人 reset 第一篇博客，请大家多多指教！ 今天我浅谈对网页编写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届向更多技术大牛学习。 我的第一篇博客--css 清除浮动 标签：方式 溢出 就会 完成 ali 很多 line 个人 reset 原文地址：https://www.cnblogs.com/zhanglei154636/p/12349302.html