CSS基础之清除浮动-创新互联

其中关键的部分为：

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

 这里 content 的值尽量写为空或者不写，如果写其他值，则需添加多余的代码，举例如下：

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

虽然也能清除浮动，但多了一些不必要的代码。

二、在结尾处添加空的div标签

原理跟使用 :after 伪类一样，都是通过 clear: both; 来实现的。示例代码如下

    
    
    


头部

    left
    right
    

底部

三、父元素定义 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许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。