标签：浮动 both 网页 第一篇 清除 元素 博客 css

第一篇博客，请大家多多指教！

今天我浅谈对网页编写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届向更多技术大牛学习。

标签：浮动,both,网页,第一篇,清除,元素,博客,css
来源： https://www.cnblogs.com/zhanglei154636/p/12349302.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。