浮动一开始时为了实现图片文字环绕

<img src="images/1.jpeg">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitat</p>

img{float:left}

浮动元素后，使得父元素包含浮动元素

<section>
    <img src="images/1.jpeg">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitat</p>
</section>

img{float:left;}
1.对父元素设置overflow:hidden
    section{overflow:hidden;}

2.父元素也设置float
    section{float:left;}

3.在父元素末尾添加清除元素,用伪类实现比较方便，不需要手动添加html
    section:after{
        content:'.';
        visibility:hidden;
        height:0;
        display:block;
        clear:both;            
    }