头部

 .father:after{
            display: block;
            content: "";
            clear: both;
        }

 .father:after{
          display: block;
          height: 0;
          visibility: hidden;
          content: "清除浮动";
          clear: both;
        }

    
    
    


头部

三、父元素定义 overflow：auto;

HTML结构跟上面一样，CSS样式部分如下：

*{
    margin:0;
    padding: 0;
}
#header,#footer{
    width: 100%;
    height: 50px;
    background: #3ac;
}
.father{
    margin: 10px auto;
    overflow: auto;
}
.float_left{
    float: left;
    background: #a3f;
    width: 70%;
    height: 450px;
}
.float_right{
    float: right;
    background: #f3f;
    width: 30%;
    height: 300px;
}

这种方法使用起来很简单，但具有一定的局限性。内部宽高超过父级div时，会出现滚动条。

以上就是清除浮动的三种方法。另外如果父元素本身也是浮动的话，则父元素内就无需清除浮动。要根据实际情况选择可行的方法。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。