网页布局中经常会用到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 { /* background-color: #333; */ } .header a { /* color: #fff; */ 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实现清除浮动的方法汇总,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
全文 5000 字,深度剖析 Webpack Loader 的特性、运行机制、开发技巧,欢迎点赞...
前言 在一次偶然查看 PHP 文档的时候,发现了一些有趣的内容,随着阅读的增加,...
手机站开发遇到一些问题,设计页面使用多大的尺寸?为此做了一些研究,除IPhone...
本文主要介绍了AmazeUI导航的示例代码,分享给大家,也给自己留个笔记,具体如下...
ZooTeam 前端周刊|第 132 期 浏览更多往期周刊,请访问: https://weekly.zoo.t...
简介: 淘宝特价版是集团内应用Flutter技术场景比较多,且用户量一亿人以上的应...
本文主要介绍了css3 flex布局实现平均分配元素,给自己留个笔记,也分享给大家,...
设计师要懂心理学读书笔记 设计师要懂心理学这本书很有趣,首先它很简单,任何对...
px(pixel)像素 相信大家对像素这个名词并不陌生,接下来来介绍下这个单位的一些小...
未来的CSS太让人兴奋了:一方面,是全新的页面布局方式;另一方面,是酷炫的滤镜...