重庆分公司

咨询热线：

028-86922220

关于我们

服务项目

小程序开发

案例展示

建站动态

联系我们

地址：成都市太升南路288号锦天国际A幢1002号

电话：028-86922220

028-86922220

重庆分公司，新征程启航

为企业提供网站建设、域名注册、服务器等服务

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

CSS基础之清除浮动

成都创新互联专注于企业营销型网站、网站重做改版、鲁甸网站定制设计、自适应品牌网站建设、H5网站设计、商城开发、集团公司官网建设、成都外贸网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为鲁甸等各大城市提供网站开发制作服务。

本人前端菜鸟一枚，在学习 CSS 过程中发现网上流传的教程参差不齐，要么内容不够详细，要么方法就是错的。本文是在我参考了许多前辈经验的基础上编写的，如有错误的地方，请各位大牛不吝赐教。以下是我总结的三种行之有效而且比较简单实用的方法。

一、父级div定义伪类 :after

代码如下：




    
    CSS基础之清除浮动
    


头部

left

right

底部

其中关键的部分为：

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

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

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

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

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

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




    
    CSS基础之清除浮动
    


头部

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

文章名称：CSS基础之清除浮动-创新互联
本文链接：http://cqcxhl.cn/article/ccdgjh.html