资讯专栏INFORMATION COLUMN

Css清除浮动的方法总结

LeanCloud / 215人阅读

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

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

清除浮动影响的几种方法:

给父级元素设置高度

效果图:

代码:



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

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

效果图:

代码:





主要内容

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

效果图:

代码:



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

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

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

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

效果图:

代码:




    
主要内容

原文链接:https://www.mi360.cn/articles/94

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/114933.html

相关文章

  • CSS清除浮动float三种方法总结,为什么清浮动浮动会有那些影响?

    ...实现了! img{display: none}; 略图 原理:使用overflow属性来清除浮动有一点需要注意,overflow属性共有三个属性值:hidden,auto,visible。我们可以使用hiddent和auto值来清除浮动,但切记不能使用visible值,如果使用这个值将无法达到清除...

    MAX_zuo 评论0 收藏0
  • 简述清除浮动

    为什么要清除浮动? 1、影响其他元素定位父盒子高度为0,子盒子全部浮动、定位,子盒子不会撑开父盒子,下面元素会到子盒子下面。 2.背景图片或颜色不能正常显示由于浮动产生,如果对父级设置了CSS背景颜色或CSS...

    FuisonDesign 评论0 收藏0
  • 清除浮动方式总结

    为什么要清除浮动? 虽说是清除浮动,其实是清除浮动产生影响。浮动元素,高度会塌陷,而高度塌陷使我们布局中需要清除浮动最重要原因之一。 清除浮动方法: 父级div定义height 原理:父级div手动定义height...

    laoLiueizo 评论0 收藏0
  • CSS-清除浮动

    什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器高度为auto,且容器内容中有浮动(float为left或right)元素,在这种情况下,容器高度不能自动伸长以适应内容高度,使得内容溢出到容器外面而影响(甚至...

    刘厚水 评论0 收藏0
  • CSS 深入理解:overflow: hidden——隐藏溢出、清除浮动、解除坍塌

    overflow:hidden 主要功能有三个: 隐藏溢出 清除浮动 解除坍塌 下面用例子来加深理解: 初始html内容: Document 初始css样式: .container{ background-color: black; } .div1{ background-color: aqua; width: 100px; heigh...

    WalkerXu 评论0 收藏0

发表评论

0条评论

LeanCloud

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<