css最好的清除浮动方法

浮动就是让元素脱离了原本的文本流,按照浮动的指定方向进行移动,直到遇到了父级边界元素或者是相邻的浮动元素才会停下。浮动的元素会使得它的高度塌陷,进而影响到布局的正常显示。

比如,在不清除浮动的情况下:

css最好的清除浮动方法_第1张图片

.box1 {
        width: 200px;
        height: 100px;
        background-color: #e04993;
        float: left;
    }

    .box2 {
        width: 300px;
        height: 100px;
        background-color: blue;
        float: left;
    }

    .box3 {
        width: 600px;
        height: 100px;
        background-color: blueviolet;
    }

清除浮动后:

css最好的清除浮动方法_第2张图片

.box:after {
        content: "";     
        height: 0;
        display: block;
        visibility: hidden;
        clear: both;
    }

    .box {
        zoom: 1;  //after伪类,触发IE下haslayout,使元素根据自身内容计算宽高,它的效果和height:1%一样。
    }

你可能感兴趣的:(CSS)