元素浮动定义

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。

如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。

注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。


why 子元素浮动 会导致父元素 高度塌陷?

这是因为内部的元素设置float:left || right后,就丢失了clear:both和display:block(持怀疑态度)的样式,所以外部的父容器不会被撑开。


举个?:

子元素未设置浮动,父元素自动被撑开

    <body>
        <div class="father">
            <div class="son"></div>
        </div>
    </body>
<style>
    .father {
        width: 400px;
        border: 1px solid blue;
    }
    .son {
        width: 200px;
        height: 200px;
        border: 1px solid red;
        background-color: yellow;
    }
</style>   

clipboard.png

子元素设置浮动,父元素高度塌陷

clipboard.png

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
<style>
    .father {
        width: 400px;
        border: 1px solid blue;
    }
    .son {
        width: 200px;
        height: 200px;
        border: 1px solid red;
        background-color: yellow;
        float: left;
    }
</style>

闭合浮动的常见解决方案

最终,我们要的效果是要跟没设置浮动之前的效果一样,让父元素高度自适应:

clipboard.png

  • 在浮动元素之后添加清除浮动的子元素:

<div class="father">
    <div class="son"></div>
    <div class="clearFloat"></div>
</div>
<style>
.father {
    width: 400px;
    border: 1px solid blue;
}
.son {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    background-color: yellow;
    float: left;
}
.clearFloat {
    width: 100%;
    height: 0;
    clear: both;
}
</style>

父元素设置 overflow: hidden

<div class="father">
    <div class="son"></div>
</div>
<style>
.father {
    width: 400px;
    border: 1px solid blue;
    overflow: hidden;
}
.son {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    background-color: yellow;
    float: left;
}
</style>

是不是很神奇!因为子元素的浮动,会导致父元素误认为content高度为0(即蓝色边框为一条线),所以父元素设成overflow:hidden溢出隐藏的话,直觉上应该子元素由于溢出导致不显示才对。但真实效果是:父元素设成overflow:hidden溢出隐藏后,父元素高度居然自适应了!这是怎么回事呢?是因为 BFC(Block Formatting Context),感兴趣的童鞋,点击链接了解一下哈...

用 :after 伪元素,思路是用:after元素在div后面插入一个隐藏文本”.”,隐藏文本用clear来实现闭合浮动

.father:after {
    clear: both;
    content: ".";   //任意文本如“dfgdfg”
    display: block;
    height: 0;      //高度为0且hidden让该文本彻底隐藏
    visibility: hidden;
}

mit
243 声望12 粉丝

把喜欢的事儿一件件的做到极致……