<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>Insert title here</title>
        <link rel="stylesheet" type="text/css" href="../css/cssFloat.css"/>    
        <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
    </head>
<body>
    <div class="mainCss">
        <img alt="none" src="../img/logo.png"/>
        <p >text</p>
        <div class="clear"/>
    </div>
</body>
</html>
.mainCss
{
    background-color:gray;
}
.mainCss p
{
    float:left;    
}
.mainCss img
{
    float:left;
}
.clear
{
    clear:both;
}

 

float标记的元素将脱离原来的文档流，相对于父元素浮起来，就相当于一个天上，一个地下一样

都浮起来后，mainCss的div就为空了，也就相当于没有大小了，所以看不见，再加一个空的div

clear标记，使得其周围不能有浮动元素，所以位置处在了mainDIV的最下一行，所以mainDIV就被撑开显示出来了