解决高度塌陷

2.高度塌陷问题及解决

在文档流中，父元素的高度默认是被子元素撑开的，即子元素多高，父元素多高。但是当设置子元素为浮动之后，子元素会脱离文档流，此时无法撑起父元素高度，即造成了高度塌陷。

(1)可以将父元素高度写死，但是这样的话父元素的高度将不能自适应子元素的高度，所以不推荐使用

(2)使用BFC

开启BFC后，元素将会具有如下的特性：

父元素的垂直margin不会和子元素重叠

开启BFC的元素不会被浮动元素所覆盖

开启BFC的元素可以包含浮动的子元素

如何开启BFC

设置元素浮动：虽然可以撑开父元素，但会导致父元素的宽度丢失，而且也会造成下边的元素上移，无法解决问题

设置元素绝对定位

设置元素为inline-block：可以解决问题，但是会造成宽度丢失，不推荐

设置overflow为非visible的值：常为hidden和auto，推荐使用

但是在IE6及以下的浏览器中并不支持BFC，但是有另一个隐含属性hasLayout，作用和BFC类似。

副作用最小的开启hasLayout的方法：zoom:1；其中zoom表示放大的属性，值是几就放大几倍

综上，想要解决高度塌陷，只需同时设置：

overflow：hidden；

zoom：1；

 

<body>
    <div class="box3">
        <div class="box1"></div>
    </div>
    <div class="box2"></div>
    <style>
        .box1 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: blue;
        }

        .box2 {
            height: 200px;
            background-color: yellow;
        }

        .box3 {
            border: 10px solid red;
            overflow: hidden;
            zoom: 1;
        }
    </style>

 

(3)使用clear来解决

可以直接在高度塌陷的父元素的最后，添加一个空白的块级元素(如div)。因为这个块级元素没有浮动，多以可以撑开父元素的高度。然后对其清除浮动，这样就可以通过这个空白的块级元素来撑开父元素的高度，并且基本没有副作用，几乎兼容所有情况。

但是，这样会在页面中添加一个多余的元素。还有一种更好的办法。

<body>
    <div class="box1">
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
    <style>
        .box1 {
            border: 10px solid red;
        }

        .box2 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: yellow;
        }

        .box3 {
            clear: both;
        }
    </style>

 

(4)通过after伪类

可以通过after伪类向元素的最后添加一个空白的块级元素，然后对其清除浮动，此方法和3的原理一样，而且不会在页面中添加多余的div，是最好的方式。

但是IE6中不支持伪类，所以IE6中还需要使用zoom：1来处理

<body>
    <div class="box1 clearfix">
        <div class="box2"></div>
    </div>
    <style>
        .box1 {
            border: 10px solid red;
        }

        .box2 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
//after伪类，向选定的元素后插入内容和样式

        .clearfix:after {
            /* 添加一个内容 */
            content: "";
            /* 此时为一个内联元素，和浮动元素在同一个水平线上，即使清除浮动仍然在同一水平线。需要转换为块级元素 */
            display: block;
            clear: both;
        }
        .clearfix {
            zoom: 1;
        }
    </style>

 

posted @ 2020-04-04 17:03  ajjoker  阅读(107)  评论(0)    收藏  举报