资讯专栏INFORMATION COLUMN

Css清除浮动的方法总结

LeanCloud / 443人阅读

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

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

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

给父级元素设置高度

效果图:

代码:



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

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

效果图:

代码:





主要内容

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

效果图:

代码:



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

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

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

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

效果图:

代码:




    
主要内容

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

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

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

相关文章

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

    摘要:方法三据说是最高大上的方法方法注意作用于浮动元素的父亲先说原理这种方法清除浮动是现在网上最拉风的一种清除浮动,他就是利用和来在元素内部插入两个元素块,从面达到清除浮动的效果。的作用是允许浏览器渲染它,但是不显示出来,这样才能实现清楚浮动。 一、抛一块问题砖(display: block)先看现象: showImg(https://segmentfault.com/img/bVrWvS)...

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

    摘要:为什么要清除浮动影响其他元素定位父盒子高度为,子盒子全部浮动定位,子盒子不会撑开父盒子,下面的元素会到子盒子的下面。清除浮动方法总结对父级元素设置高度对父级设置适合高度样式清除浮动,一般设置高度需要能确定内容高度才能设置高度设置为内容高度。 为什么要清除浮动? 1、影响其他元素定位父盒子高度为0,子盒子全部浮动、定位,子盒子不会撑开父盒子,下面的元素会到子盒子的下面。 2.背景图片或颜...

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

    摘要:为什么要清除浮动虽说是清除浮动,其实是清除浮动产生的影响。浮动的元素,高度会塌陷,而高度的塌陷使我们布局中需要清除浮动的最重要的原因之一。清除浮动的方法父级定义原理父级手动定义,就解决了父级无法自动获取到高度的问题。 为什么要清除浮动? 虽说是清除浮动,其实是清除浮动产生的影响。浮动的元素,高度会塌陷,而高度的塌陷使我们布局中需要清除浮动的最重要的原因之一。 清除浮动的方法: 父级di...

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

    摘要:清除浮动方法方法一使用带属性的空元素在浮动元素后使用一个空元素如,并在中赋予属性即可清理浮动。 什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象。这个现象叫浮动溢出,为了防止这个现象...

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

    摘要:使用解除坍塌触发可以使用解除坍塌,坍塌是不分父的高度是否固定的。解除坍塌添加外边距效果浮动的不会坍塌。它还额外肩负了解除坍塌的重任。 overflow:hidden 的主要功能有三个: 隐藏溢出 清除浮动 解除坍塌 下面用例子来加深理解: 初始html内容: Document 初始css样式: .container{ ...

    WalkerXu 评论0 收藏0

发表评论

0条评论

LeanCloud

|高级讲师

TA的文章

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