css-浮动与清除浮动的原理详解（清除浮动的原理你知道吗）

时间：2017-08-30 15:31:10 阅读：199 评论：0 收藏：0 [点我收藏+]

标签：属性 div bfc hid src str nbsp 技术分享 font

float元素A的特点：

脱离文档流
靠向left或right
float元素会和块盒子重叠
- 准确来说，是块盒子和A重叠，但块盒子内容会浮动在A周围
- 不会和inline元素重叠

技术分享

    <div class="parent">
        <div class="box"></div>
        <p>
            孟子曰：“君子有三乐，而王天下不与存焉。父母俱存，兄弟无故①，一乐也；仰不愧于天，俯不怍②于人，二乐也；得天下英才而教育之，三乐也。
君子有三乐，而王天下者不与存焉孟子曰：“君子有三乐，而王天下不与存焉。父母俱存，兄弟无故①，一乐也；仰不愧于天，俯不怍②于人，二乐也；得天下英才而教育之，
三乐也。君子有三乐，而王天下者不与存焉孟子曰：“君子有三乐，而王天下不与存焉。父母俱存，兄弟无故①，一乐也；仰不愧于天，俯不怍②于人，二乐也；
得天下英才而教育之，三乐也。君子有三乐，而王天下者不与存焉
        </p>
        <div class="box"></div>
        <div class="behind"></div>
        <div class="box"></div>
    </div>
        .parent{
            width:380px;
            background-color:rgb(25, 132, 199);
        }
        .box{
            width: 120px;
            height: 100px;
            float: left;
            background-color: rgb(25, 199, 185);
        }
        .behind{
            width: 150px;
            height: 120px;
            background-color: black;
        }