Css实现清除浮动的方法汇总

时间:2021-05-08

网页布局中经常会用到float浮动,但是浮动的块级元素脱离了标准文档流,使得浮动元素的父元素没有高度,导致父级元素没有高度,所以需要清除浮动对父级元素的影响,本文介绍清除浮动的几种方法。

清除浮动影响的几种方法: 给父级元素设置高度

效果图:

代码:

<style> * { padding: 0; margin: 0; } .header { height: 30px; line-height: 30px; background-color: #333; } .header a { color: #fff; text-decoration: none; } ul { float: right; } li { float: left; list-style: none; padding-right: 20px; }</style><div class="header"> <ul> <li><a href="#">首页</a></li> <li><a href="#">文章</a></li> <li><a href="#">问答</a></li> <li><a href="#">帮助</a></li> <li><a href="#">关于</a></li> </ul></div>

外墙法 :使用一个空白块级元素上添加css样式 clear 清除浮动

注意:添加了clear样式的块级元素添加不了 margin 外边距属性

效果图:

代码:

<style> * { padding: 0; margin: 0; } .header { } .header a { text-decoration: none; } ul { float: right; } li { float: left; list-style: none; padding: 5px 20px; } .clearfix { height: 10px; background-color: red; clear: both; } .main { color: #fff; height: 100px; background-color: blue; }</style><div class="header"> <ul> <li><a href="#">首页</a></li> <li><a href="#">文章</a></li> <li><a href="#">问答</a></li> <li><a href="#">帮助</a></li> <li><a href="#">关于</a></li> </ul> </div><div class="clearfix"></div> <div class="main">主要内容</div>

内墙法 :使用一个空白块级元素上添加css样式 clear 清除浮动

效果图:

代码:

<style> * { padding: 0; margin: 0; } .header { background-color: #333; } .header a { color: #fff; text-decoration: none; } ul { float: right; } li { float: left; list-style: none; padding: 5px 20px; } .clearfix { clear: both; }</style><div class="header"> <ul> <li><a href="#">首页</a></li> <li><a href="#">文章</a></li> <li><a href="#">问答</a></li> <li><a href="#">帮助</a></li> <li><a href="#">关于</a></li> </ul> <div class="clearfix"></div></div>

内墙法 相对于 外墙法 有相对优点:

内墙法 设置后,浮动元素的父级元素会被撑开,也就是说有了高度

给浮动元素的父元素添加 overflow:hidden

原意:表示移除隐藏,溢出边框的内容都要隐藏掉

效果图:

代码:

<style> * { padding: 0; margin: 0; } .header { background-color: #333; overflow: hidden; } .header a { color: #fff; text-decoration: none; } ul { float: right; } li { float: left; list-style: none; padding: 5px 20px; } .main { color: #fff; height: 100px; background-color: blue; }</style><div class="header"> <ul> <li><a href="#">首页</a></li> <li><a href="#">文章</a></li> <li><a href="#">问答</a></li> <li><a href="#">帮助</a></li> <li><a href="#">关于</a></li> </ul></div> <div class="main">主要内容</div>

总结

以上所述是小编给大家介绍的Css实现清除浮动的方法汇总,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章