清除浮动的方法

rottengeek 发布于2019-08-30 15:53 / 1621人阅读

摘要：清除浮动本质解决父级元素因为子级浮动引起内部高度为的问题。清除浮动的方法选择器额外标签法推荐的做法是通过在浮动元素末尾添加一个空的标签例如，或则其他标签等亦可。

清除浮动本质：解决父级元素因为子级浮动引起内部高度为0 的问题。

         清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。

清除浮动的方法：

        选择器`{clear:left | right | both;}`

1 额外标签法：
W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如

，或则其他标签br等亦可。
优点：代码简洁
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
2 父级添加overflow属性方法
可以通过触发BFC的方式，可以实现清除浮动效果。
可以给父级添加： overflow为 hidden|auto|scroll 都可以实现。
优点：代码简洁
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
3 使用after伪元素清除浮动

 .clearfix:after {  content: "."; display: block; height: 0; clear: both; visibility: hidden;  }   
 .clearfix {*zoom: 1;}   ie6、7 专有

优点：符合闭合浮动思想结构语义化正确
缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
代表网站：百度、淘宝网、网易等
4 after伪元素空余字符法
content:"200B";这个参数，Unicode字符里有一个“零宽度空格”，即 U+200B，代替原来的“.”，可以缩减代码量。而且不再使用visibility:hidden。

.clearfix:after {content:"200B"; display:block; height:0; clear:both; }
.clearfix { *zoom:1; }.

当然有些网站也用 content:"0200" 的，都是空格的意思。
代表网站：阿里巴巴等
5 使用before和after双伪元素清除浮动

.clearfix:before,.clearfix:after{ 
           content:".";
           display:table;
   }
.clearfix:after{
 clear:both;
}
.clearfix{*zoom:1;}

优点：代码更简洁
缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
代表网站：小米、腾讯等

云服务器 GPU云服务器的清除方法清除浮动 html浮动的影响缓存文件的清除

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116770.html

清除浮动的方法

摘要：前言本文主要介绍清除浮动的种风方法及利弊浮动对页面的影响如果一个父级块元素中的子元素浮动，那么所有浮动的子元素都脱离了文档流，如果父元素无法确定高度，则其下面的兄弟元素会自动补位，造成视图结构混乱，所以这个时候要进行清除浮动。前言：本文主要介绍清除浮动的4种风方法及利弊浮动对页面的影响：如果一个父级块元素中的子元素浮动，那么所有浮动的子元素都脱离了文档流，如果父元素无法确定高度...

Alex 2019-08-29 12:54 评论0 收藏0
css浮动现象及清除浮动的方法

css浮动现象及清除浮动的方法首先先明确浮动最初的定义及使用场景：实现文本环绕图片的效果。除了用浮动外，目前暂无其他方法实现文本环绕 showImg(https://segmentfault.com/img/remote/1460000016137003?w=838&h=382); 再来看看浮动的具体定义：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不...

Kyxy 2019-08-29 16:29 评论0 收藏0
css浮动现象及清除浮动的方法

css浮动现象及清除浮动的方法首先先明确浮动最初的定义及使用场景：实现文本环绕图片的效果。除了用浮动外，目前暂无其他方法实现文本环绕 showImg(https://segmentfault.com/img/remote/1460000016137003?w=838&h=382); 再来看看浮动的具体定义：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不...

weakish 2019-08-02 11:19 评论0 收藏0
CSS清除浮动float的三种方法总结，为什么清浮动？浮动会有那些影响？

摘要：方法三据说是最高大上的方法方法注意作用于浮动元素的父亲先说原理这种方法清除浮动是现在网上最拉风的一种清除浮动，他就是利用和来在元素内部插入两个元素块，从面达到清除浮动的效果。的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清楚浮动。一、抛一块问题砖（display： block）先看现象： showImg(https://segmentfault.com/img/bVrWvS)...

MAX_zuo 2019-08-28 18:28 评论0 收藏0
简述清除浮动

摘要：为什么要清除浮动影响其他元素定位父盒子高度为，子盒子全部浮动定位，子盒子不会撑开父盒子，下面的元素会到子盒子的下面。清除浮动方法总结对父级元素设置高度对父级设置适合高度样式清除浮动，一般设置高度需要能确定内容高度才能设置高度设置为内容高度。为什么要清除浮动？ 1、影响其他元素定位父盒子高度为0，子盒子全部浮动、定位，子盒子不会撑开父盒子，下面的元素会到子盒子的下面。 2.背景图片或颜...

FuisonDesign 2019-08-29 12:35 评论0 收藏0