高度自适应和高度塌陷

灰太狼 2023-07-20 08:22 115阅读 0赞

高度自适应的情况：

  1. 高度不去设置，或者高度设置auto 内容撑开父元素的高度。
  2. 内容撑开父元素的高度 -> 最小高度的设置 min-height
  3. 浮动元素添加高度自适应 -> 添加浮动元素的父元素没有高度，会出现高 度塌陷

高度自适应第一种情况：

  1. 内容撑开父元素高度

高度自适应第二种情况：

  1. 让子元素高度随着父元素高度进行改变。
  2.         需求：让一个元素在浏览器窗口完全铺满：
  3.         前提条件：
  4.             body,html{
  5.                 height:100%;
  6.             }
高度塌陷出现的场景：
  1. 当子元素有浮动，父元素没有高度的时候，父元素会出现高度塌陷
    注：浮动的子元素不会撑开父元素。
解决高度塌陷的方法：
  1. 给父元素添加高度 】缺点：遇到高度自适应就不行了
  1. 添加overflow:hidden 原理：触发了BFC(布局逻辑)，BFC规定计算bfc高度的时候，浮动元素也参与计算。
    弊端：隐藏掉了定位在房前元素外的内容
  1. 在浮动元素的下方添加一个空的div,给div设置clear:both属性；忽略上方同级添加的浮动元素留出的空间。
    弊端：形成代码的冗余。
  1. 万能清除法
    .clear_fix::after{
    content:””;//内容
    clear:both;//忽略上方同级添加的浮动元素留出的空间
    height:0;//高度为0
    display:block;//转化为块状元素
    overflow:hidden;//溢出隐藏
    visibility:hidden;//将元素隐藏占据空间
    }
  1. ie专用清除法
    .clear_fix{
    zoom:1;
    }

发表评论

表情：
评论列表 （有 0 条评论，115人围观）

还没有评论，来说两句吧...

相关阅读

    相关 HTML高度塌陷

    描述 父div靠子div撑开，子div全部设置浮动，父div因没有高度而出现塌陷的情况 解决 1. 父div设置overflow: hidden 2. cl...

    傷城~傷城~/ 0 赞/ 145 阅读

    相关 iframe自适应高度

    [JS][]自适应高度，其实就是设置[iframe][]的高度，使其等于内嵌网页的高度，从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。 如果内容是固定的，

    落日映苍穹つ落日映苍穹つ/ 0 赞/ 397 阅读