解决高度塌陷定位问题

先问一下什么是高度塌陷?

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

<!DOCTYPE html>
<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>

这个可以简单来说就是一个塌陷了,那么解决办法是什么呢请看下面我为大家说一下。

解决方法:

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

那么浮动是什么呢?

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

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

再说一下定位问题

在上面的问题中不难看出定位和浮动是有若隐若现的关系的。

那么我就给大家简答的说一下吧:

CSS 定位和浮动

    CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将
    布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才
    能完成的任务。

    定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的
    位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然,
    这个功能非常强大,也很让人吃惊。要知道,用户代理对 CSS2 中定位的支
    持远胜于对其它方面的支持,对此不应感到奇怪。

    另一方面,CSS1 中首次提出了浮动,它以 Netscape 在 Web 发展初期增加
    的一个功能为基础。浮动不完全是定位,不过,它当然也不是正常流布局。

这就是对于定位和浮动的故事了!

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,790评论 1 92
  • 高度塌陷 父元素包含的子元素,子元素多高。父亲没指定,默认子元素高。子元素设置浮动以后,子元素脱离文档流,此时子元...
    YU不忘初心阅读 9,446评论 0 1
  • 高度塌陷 父元素包含的子元素,子元素多高。父亲没指定,默认子元素高。子元素设置浮动以后,子元素脱离文档流,此时子元...
    叫我老村长阅读 1,826评论 0 0
  • 1. 前言 前端圈有个“梗”:在面试时,问个css的position属性能刷掉一半人,其中不乏工作四五年的同学。在...
    YjWorld阅读 4,527评论 5 15
  • 转眼间就到了母亲节,祝全天下所有养育我们、滋润我们心灵的母亲们,母亲节快乐!我们爱你们!*^O^* 以下是自己在家...
    桐Violette阅读 275评论 0 4