清除浮动的八种方法 - 蓝蓝设计_UI设计公司

清除浮动的八种方法

2018-3-14 释然 前端技术资源

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里 

浮动是什么?

浮动元素会脱离文档流进行左浮或者右浮,直到碰到父级元素或者其他的浮动元素。

为什么清除浮动:浮动会导致父元素高度坍塌,因为浮动脱离文档流,浮动以后不占文档流的位置,撑开的父元素高度肯定会坍塌。

清除浮动的八种方法:

1、父级div给出固定的高度。手动定义height,这样就解决了父级元素获取不到高度的问题。

优点:代码量少,简单容易掌握。

缺点:只适合高度固定的布局,如果高度和父级div不同会出现问题。

2、overflow,设置overflow:hidden。

优点:代码少,浏览器支持。

缺点:会把超出的部分隐藏起来,而且不能配合position使用

3、额外标签,添加一个新的标签,如div,或者br,并且设置标签的属性clear:both;清除浮动,让父级能自动获得高度。

优点:代码少,浏览器支持,不会各种问题。

缺点:会有很多空的div或者br。

4、使用单伪类after和zoom,使用方法:

.clearfloat:after{

  content:"";//设置内容为空

  height:0;//高度为0

  line-height:0;//行高为0

  display:block;//将文本转为块级元素

  visibility:hidden;//将元素隐藏

  clear:both//清除浮动

 }

  .clearfloat{

 zoom:1;为了兼容IE

    }

优点:浏览器支持好,大型的浏览器都在使用,建议使用。

缺点:代码多,需要after和zoom都要使用才能兼容主流的浏览器。

5、双伪类清除浮动。使用方法:

.clearfloat:before,.clearfloatafter {

                 content: "";

                 display: block;

                  clear: both;

             }

            .clearfloat {

                 zoom: 1;

           }

缺点:不严谨不建议使用

6、父级div跟着浮动,所有代码一起浮动就会形成一个整体,

缺点:会产生新的问题,不建议使用。

7、父级定义display:table;将div属性变成的表格。

缺点:产生新的问题,而且影响布局。

8、overflow:auto;需要设置width,不设置height,浏览器会自动检测浮动区的高度。

缺点:容易生成滚动条。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



标签: 清除浮动的八种方法


Powered by emlog 京ICP备12006971号-1 sitemap