Css实现清除浮动的方法汇总
网页布局中经常会用到float浮动,但是浮动的块级元素脱离了标准文档流,使得浮动元素的父元素没有高度,导致父级元素没有高度,所以需要清除浮动对父级元素的影响,本文介绍清除浮动的几种方法。
清除浮动影响的几种方法: 给父级元素设置高度
效果图:
代码:
外墙法 :使用一个空白块级元素上添加css样式 clear 清除浮动
注意:添加了clear样式的块级元素添加不了 margin 外边距属性
效果图:
代码:
主要内容
内墙法 :使用一个空白块级元素上添加css样式 clear 清除浮动
效果图:
代码:
内墙法 相对于 外墙法 有相对优点:
内墙法 设置后,浮动元素的父级元素会被撑开,也就是说有了高度
给浮动元素的父元素添加 overflow:hidden
原意:表示移除隐藏,溢出边框的内容都要隐藏掉
效果图:
代码:
主要内容
总结
以上所述是小编给大家介绍的Css实现清除浮动的方法汇总,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对潘少俊衡网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
版权声明
本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
本文地址:/web/CSS/74725.html