围住浮动元素的三种方法

常规文档流，即块级元素包围着所有子元素，而且在页面中自上而下相互堆叠在一起，浮动元素脱离了文档流，其父元素看不到它，因此也不会包围它

<div class="box">
        <div class="wrap">
            <img class="pictuer" src="./images/1.png" alt="">
            <p class="text">jQuery and its cousins are great, and by all means use them if it makes it easier to develop
                your application.</p>
        </div>

        <div class="footer">
            If you're developing a library on the other hand, please take a moment to consider if you actually need
            jQuery as a dependency. Maybe you can include a few lines of utility code, and forgo the requirement. If
            you're only targeting more modern browsers, you might not need anything more than what the browser ships
            with.
        </div>
    </div>

方法1：为父元素添加overflow:hidden；

.wrap{
    border: 1px solid #999;
    overflow: hidden;
}

.pictuer{
    float: left;
}

.text{
    line-height: 30px;
}

.footer{
    line-height: 36px;
    border: 1px solid #f00;
    margin-top: 10px;
}

方法2：同时浮动父元素；

促使父元素包围其浮动子元素的方法，是也让父元素浮动起来

.wrap{
    width: 80%;
    border: 1px solid #999;
    float:left;
    margin-bottom: 20px;
    margin-top: 20px;
}

.pictuer{
    float: left;
    margin-right: 10px;
}

.text{
    line-height: 30px;
   
}

.footer{
    width: 80%;
    clear: both;
    line-height: 36px;
    border: 1px solid #f00;
}

方法3：添加非浮动的清除元素；

强制父元素包含其浮动子元素的方法，就是给父元素的最后添加一个非浮动的子元素，然后清除该子元素。由于包含元素一定会包围非浮动的子元素，而且清除会让这个子元素位于（清除一侧）浮动元素的下方，因此，包含元素一定会包含这个子元素——以及前面的浮动元素。在包含元素最后添加子元素作为清除元素的方式有两种.

第一种方式不太理想，也就是简单地在HTML标记中添加一个子元素，并给它应用clear属性

<div class="box">
        <div class="wrap">
            <img class="pictuer" src="./images/1.png" alt="">
            <p class="text">jQuery and its cousins are great, and by all means use them if it makes it easier to develop
                your application.
            </p>
            <div class="clear_me"></div> 
        </div>

        <div class="footer">
            If you're developing a library on the other hand, please take a moment to consider if you actually need
            jQuery as a dependency. Maybe you can include a few lines of utility code, and forgo the requirement. If
            you're only targeting more modern browsers, you might not need anything more than what the browser ships
            with.
        </div>
    </div>

/* 第三种方法中的其一 */
.wrap{
    width: 80%;
    border: 1px solid #999;
    margin-bottom: 20px;
    margin-top: 20px;
}

.pictuer{
    float: left;
    margin-right: 10px;
}

.text{
    line-height: 30px;
   
}

/* 添加清除浮动的div */
.clear {
    clear: left;    
} 

.footer{
    width: 80%;
    clear: both;
    line-height: 36px;
    border: 1px solid #f00;
}

第二种方法clearfix规则

<div class="box">
        <div class="wrap clearfix">
            <img class="pictuer" src="./images/1.png" alt="">
            <p class="text">jQuery and its cousins are great, and by all means use them if it makes it easier to develop
                your application.
            </p>
        </div>

        <div class="footer">
            If you're developing a library on the other hand, please take a moment to consider if you actually need
            jQuery as a dependency. Maybe you can include a few lines of utility code, and forgo the requirement. If
            you're only targeting more modern browsers, you might not need anything more than what the browser ships
            with.
        </div>
    </div>

添加了一个清除的包含句点作为非浮动元素（必须得有内容，而句点是最小的内容）。规则中的其他声明是为了确保这个伪元素没有高度，而且在页面上不可见

使用clear:both意味着section中新增的子元素会清除左、右浮动元素（位于左、右浮动元素下方）

/* 第三种方法中的其二 */
.wrap{
    width: 80%;
    border: 1px solid #999;
    margin-bottom: 20px;
    margin-top: 20px;
}

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

.pictuer{
    float: left;
    margin-right: 10px;
}

.text{
    line-height: 30px;
   
}

.footer{
    width: 80%;
    clear: both;
    line-height: 36px;
    border: 1px solid #f00;
}