清除浮动的几种方式(解决高度塌陷问题)

时间:2021-1-8 作者:admin

      相信很多前端小白在进行页面设计时会用到浮动的方式进行布局,这样就会使元素脱离文档流。而在文档流中,父元素会默认被子元素撑开,一旦子元素设置浮动,完全脱离文档流,就会导致子元素无法撑起父元素的高度,就会产生父元素高度塌陷问题。下面小白就来介绍清除浮动的几种常见方式。

一、什么是父元素高度塌陷

      上面我们提到了父元素出现高度塌陷问题的原因,那我们就先来了解什么是父元素高度塌陷问题。(直接上代码)

       HTML 的DOM结构代码:

<body>
   <div class="parent-box">
   <div class="son-box"></div>   
   </div>
   <div class="another-box"></div>
<body>

       css样式

<style>    . {      margin: 0;      padding: 0;    }    .parent-box {      width: 200px;      background: gray;      border: 5px solid;    }    .son-box {      width: 100px;      height: 100px;      background: blue;    }    .another-box {      width: 100px;      height: 100px;      background: greenyellow;    }  </style>

         效果如图:

       这时我们给son-box添加float : right属性,使其向右浮动,预期结果如下图:

        但是实际结果却得到下图:

        这就是父元素高度塌陷问题,父元素高度塌陷导致父元素下方元素向上移,覆盖了父元素原有的位置,这是我们最不希望出现的。只要子元素完全脱离文档流,都会出现父元素高度塌陷问题。

二、清除浮动的方法(解决高度问题)

       那么如何解决呢,下面小白就介绍几种清除浮动的方法。

一、通过开启(BFC)块级格式化上下文(overfloat : hidden ; zoom : 1 ; )

       根 据W3C的标准,在页面中元素都有一个隐含的属性叫做Block Formatting Context,即块级格式化上下文,简称BFC。该属性可以设置打开或关闭,默认是关闭的。

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

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

      如何开启元素的BFC:

  1. 设置元素浮动:不能解决高度塌陷问题,反而导致高度塌陷
  2. 设置元素绝对定位:同上
  3. 设置元素为inline-block:可以解决高度塌陷问题,但是会导致父元素宽度丢失,不推荐使用这种方式
  4. 将元素的overfloat属性设置为一个非visible的值:推荐设置为hidden,这是开启BFC副作用最小的方式;但是这样会将溢出的内容隐藏,看情况采用

      但是在IE6及以下的浏览器并不支持BFC,所以使用这种方式不能兼容部分浏览器。然而在IE6中虽然不支持BFC,但也具有另一个隐含属性叫hasLayout,该属性的作用和BFC类似,开启方式也有多种,这里就不一一列举,直接介绍一个副作用最小的方式:将元素设置zoom : 1 ;即可。具体代码如下:

.parent-box{   width: 200px;   background: gray;   border: 5px solid;   overflow: hidden;
   zoom: 1;}

二、在高度塌陷的父元素后面添加一个空的div元素

       这是解决高度塌陷问题最简单的方法,直接在高度塌陷的父元素里最后面添加一个空的div,并将设置clear :both 属性,这样由于这个空的div并没浮动,所以可以撑开父元素高度,基本没有什么副作用。但是会在页面中添加多余的结构,不建议使用。具体代码如下:

<body>
   <div class="parent-box">
   <div class="son-box"></div>
   <div style="clear: both;"></div>   
   </div>
   <div class="another-box"></div>
<body>

三、给浮动的父元素设定高度(拓展性差)

      要想让子元素浮动,父元素又不会高度塌陷,就可以通过直接给父元素设定一个高度。但这种方法拓展性差,实际应用中我们不大可能给所有的盒子加高度,不仅麻烦,并且不能适应页面的快速变化;另外一种,父容器的高度可以通过内容撑开(比如img图片),实际当中此方法用的比较多。

四、通过::after伪元素来清除浮动(推荐)

      我们可以通过设置::after伪元素来清除浮动。即给高度塌陷的父元素添加一个::after伪元素,并给这个伪元素设置一定的样式,来清除浮动。原理与第二种方法类似,但这样既解决了高度塌陷问题,又不会造成页面结构冗余,是目前最为通用的清除浮动的方法,推荐使用。具体代码如下:

.parent-box {      width: 200px;      background: gray;      border: 5px solid;    }    .parent-box::after {      content: "";      display: block;      clear: both;    }

      但是IE6 7是不支持伪元素的,为了兼容大多数浏览器,我们可以与上面提到的IE6 7及以下的浏览器支持的hasLayout相结合,可完美解决高度塌陷问题。

五、br标签清除浮动

      br标签存在一个属性clear。这个属性就是能够清除浮动的利器,在br标签中设置属性clear,并赋值all,即能清除浮动。但这种方法与第二种一样,同样会使页面结构冗余。具体代码如下:

<body>
   <div class="parent-box">
   <div class="son-box"></div>
   <br clear="all" />  
   </div>
   <div class="another-box"></div>
<body>

以上就小白介绍的几种清除浮动,解决高度塌陷问题的方法,如有啥子错误的地方,或者有更好的方法,请多指教哦!!

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。