美文网首页
css高度塌陷问题

css高度塌陷问题

作者: cloudstate | 来源:发表于2017-10-21 16:25 被阅读0次

今天百度了一下网上关于解决高度塌陷的问题,也来做个汇总吧!

首先,应该解释一下什么是高度塌陷吧~,那么什么是高度塌陷呢?

如果父元素包含的子元素脱离了文档流,且没有设置高度,父元素的高度就会塌陷为零,这就是所谓的高度塌陷了~高度塌陷会有什么危害吗?有啊!如果没解决的话,布局就乱了啊~

那么有什么好方法可以解决高度塌陷吗?

方法一:通过开启元素的BFC属性

(先解释一下什么是bfc吧,在w3c中每个元素都有一个隐藏的bfc【Block Formating Context,块级格式上下文】属性,默认为关闭)

开启BFC属性后元素的特性:

1.元素的垂直外边距不会和子元素的重合

2.开启BFC的元素不会被浮动的元素所覆盖

3.开启BFC的元素可以包含浮动的子元素

开启BFC的方法:1)设置该元素overflow属性为除去visible的属性值

                              2)设置元素的float

                              3)将元素设置为决对定位

                              4)将元素的display属性设置为:inline-block

方法二:增加一个div元素,通过清除浮动

方法三:通过:after伪类来解决,注意加上content:""的属性。

相关文章

  • css高度塌陷问题

    今天百度了一下网上关于解决高度塌陷的问题,也来做个汇总吧! 首先,应该解释一下什么是高度塌陷吧~,那么什么是高度塌...

  • CSS - 高度塌陷问题

    父元素如果不指定高度,那么它的高度是由子元素高度决定,也就是被内容撑开。 例如: 展示: 那怎么解决呢?这里就要引...

  • 前端05day

    相对定位 绝对定位 固定定位 CSS高度塌陷 高度塌陷问题 在文档流中,父元素的高度默认是被子元素撑开的,也就是子...

  • 浅谈CSS 高度塌陷问题

    表现 例如: HTML: CSS: 表现为: 产生的原因 由上面的例子可以看出,first盒子没有设置高度,由子元...

  • css 高度塌陷

    高度塌陷问题: 在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高。但是当子元素设置浮动...

  • CSS高度塌陷

    高度塌陷问题 在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高。但是当子元素设置浮动之...

  • 清除浮动的几种常用方法

    父元素自适应宽高度,子元素浮动导致高度塌陷 高度塌陷: 示例图: HTML: CSS: 第一种解决方案: 通过给父...

  • css clearfix

    当元素之间出现了高度塌陷和内边距重叠问题时,可以使用 .clearfix 类来解决 css: .clearfix:...

  • css高度自适应出现盒子高度塌陷问题

    在网页布局中经常会遇到想给盒子设置高度自适应但出现高度塌陷问题,造成这个问题的原因就在于父盒子没有设置高度,子盒子...

  • 解决高度塌陷2

    为什么出现高度塌陷?当我们设置块级元素进行浮动的时候,会导致父元素塌陷,所以需要我们解决高度塌陷问题

网友评论

      本文标题:css高度塌陷问题

      本文链接:https://www.haomeiwen.com/subject/yewiuxtx.html