常见的几种清除浮动(高度塌陷)的方法?

常见的几种清除浮动(高度塌陷)的方法?

我们经常把解决高度塌陷问题叫做清除浮动。

高度塌陷问题------指父元素高度自适应(即父元素不设置高度或高度为auto,这时的父元素就靠子元素来撑开),子元素浮动float后,造成父元素高度为0的问题。

高度塌陷解决方法一:

给父元素设置高度。缺点就是父元素无法高度自适应,因为子元素的高度不确定,若把父元素的高度定死,则一旦浮动的子元素高度大于父元素的高度,会出现子元素高度溢出的情况。

 

高度塌陷解决方法二:

给父元素添加overflow:hidden;原理是触发了BFC(BFC就是块级格式化上下文)。优点是父元素高度可以因内容多少自适应。缺点就是父元素边框之外的部分会被隐藏(这个隐藏指的是具有定位position的子元素,因为定位不是高度不高度的问题),另一方面overflow:hidden;的含义是溢出隐藏的意思,有些时候我们就是要子元素超出父元素框的部分要显示出来,若给子元素添加position:relative;定位后再设置left、top、bottom、right为负值,则溢出父元素框的部分会被隐藏。如二级菜单的影响。

 

高度塌陷解决方法三:

在浮动的子元素末尾,添加一个空的div,并设置样式:

div{ clear: both; height: 0; overflow: hidden; }

加上height和overflow是为了兼容IE6,因为IE6中不能识别最小高度的容器。

原理:在父容器的最后,添加一个空div,由于这个div并没有浮动,所以它是可以撑开父容器的高度的,然后在对其进行清除浮动,这样可以通过这个空div来撑开父元素的高度。

优点:可以自适应,溢出部分不会被隐藏。

缺点:页面中需要多加载一个盒子,而该div盒子无任何内容,显得代码冗余。

 

高度塌陷解决方法四:

给父元素添加伪元素after。即在父元素的末尾添加内容。样式为

.box:after{ content: “” ; display: block; clear:both; overflow: hidden; visibility:hidden}

本身伪元素是内联元素,所以需要display转换为块元素。

visibility:hidden;是官方给出的,为了确保万无一失,即为了确保这个content添加的内容在空间上是存在的。

 

BFC简单讲解:

根据W3C的标准,页面中的元素都隐含一个属性叫Block Formatting Context简称BFC,该属性可以设置打开或者关闭,默认是关闭的。

当开启元素的BFC以后,元素将会具有如下的特性:

  1. 父元素的垂直外边距不会和子元素重叠
  2. 开启BFC的元素不会被浮动元素所覆盖
  3. 开启BFC的元素可以包含浮动的子元素

可以触发BFC的属性:

  1. 设置元素的浮动(但是用来解决父容器的塌陷问题时父容器也会出现脱标)
  2. 设置元素的绝对定位(同样如1,父容器会出现脱标)
  3. 设置元素为inline-block(设置为行内块那么margin:auto也就不会生效了)
  4. 将元素的overflow设置为一个非visible的值(解决高度塌陷影响最小的属性)

其实还有两个清除浮动的方法,但是及其不推荐使用。这两种方法如下:

  1. display:table;不推荐使用,会产生未知问题
  2. 父元素跟着一起浮动,不推荐使用,需要解决新的浮动问题

 

 

 

 

发布了111 篇原创文章 · 获赞 0 · 访问量 1016

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 1024 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览