高度塌陷

一、什么是高度塌陷?

简单来说,就是包含含有浮动的元素的上一级的高度变为0了,下面的元素会上去


<html>
<head>
    <meta charset="utf-8">
    <title>title>
    <style type="text/css">
        .par {
            border: 1px solid green;
        } 
        .sub {
            width: 20%;
            height: 50px;
            float: left;
            border: 1px solid red;
        }
        .only {
            width: 30%;
            height: 60px;
            background: #999;
        }
    style>
head>
<body>
    <div class="par">
        <div class="sub div1">div>
        <div class="sub div2">div>
        <div class="sub div3">div>
    div>
    <div class="only">div>
body>
html>

上面的这个例子,可以看出来class为par的div的内部是含有三个子div的,当子div没有设置浮动的时候,表现出来大的效果是下面这样的,可以看出class="only"这个div的显示是在class="par"的后面的,而class="par"的高度等于里面的div(此时是按照块元素方式进行排列的)撑起来的高度

高度塌陷_第1张图片

当sub这个类选择器设置了float: left的时候,结果如下面所示,可以看出来,好像它们都挤到一块去了,而class="par"的这个外部div的height很明显是等于0的,它里面的div是浮动排列的,而class="only"的这个div可以看出来是“跑到”它上面的元素的位置去的,就好像它上面的元素都并不存在似的,这个也就是我今天要说的“高度塌陷”这个问题了
这里写图片描述

二、解决办法

首先从上面的例子中可以很容易看到,导致问题出现的原因就是因为设置了浮动,当子元素设置了浮动的时候,子元素就会完全脱离文档流,此时会导致子元素无法撑起父元素的高度,导致父元素高度塌陷

那么浮动是什么呢?

float是css的定位属性,通过使用float这个属性可以实现元素的浮动

描述
left 元素向左浮动
right 元素向右浮动
none 默认值,元素不浮动,并会显示在其文本中出现的位置
inherit 规定应该从父元素继承float属性

下面就来说一下解决(清除浮动)的办法

1. 父元素结束之前,添加一个标签

<div style="clear: both;">div>

优点:简单,易于实现

缺点:添加了没有意义的空标签

2. 父元素设置overflow: auto或者浮动元素设置overflow: hidden

.par {
  border: 1px solid green;
  overflow: auto;
} 
.sub {
  width: 20%;
  height: 50px;
  float: left;
  border: 1px solid red;
  overflow: hidden;
}

缺点:overflow: auto如果超出范围会自动生成一个滚动条,而overflow: hidden可能会导致超出部分直接隐藏且不占用文档流的空间

3. 让父元素本身也浮动

.par {
  border: 1px solid green;
  float: left;
} 

缺点:使得跟父元素相邻的元素的布局受到影响,不推荐使用

4. 使用CSS的after伪元素

.clearfix:after {
  content: ".";         /*生成内容作为最后一个元素,至于content里面是什么没有影响*/
  display: block;       /*使得生成的元素以块级元素显示,占满剩余空间*/
  height: 0;            /*避免生成的内容破坏原有空间的高度*/
  clear: both;          /*闭合浮动*/
  visibility: hidden;   /*使得生成内容不可见,并允许可能生成内容盖住的内容进行点击和交互*/
}
.clearfix {
  zoom : 1;             /*触发IE6/7的haslayout*/
}

三、BFC(Block formating context)

BFC块级格式化上下文,它是一个独立的渲染区域,一句摘自别人博客的话“BFC元素特征表现原则就是,内部元素再怎么翻江倒海,翻云覆雨都不会影响外部的元素”(http://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/)

触发BFC的情况:

  • float的值不为none的时候
  • overflow的值为auto,scroll或者hidden
  • display的值为table-cell,table-caption,inline-block
  • position的值不是relative和static

看到这里是不是发现,这个和上面列举的方式有点关系了,对的,我们也不难看出,触发了BFC就可以消除(闭合)浮动

关于这个问题就先写到这里了,希望对你有帮助 ^_^

你可能感兴趣的:(响应式)