整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

CSS-清除浮动所有方法总结

什么要清除浮动?

一开始css的浮动,其本质是用来做一些文字混排效果的,但是后来被我们拿来做布局用,就出现了很多问题。

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

我们很多时候不方便给父盒子的高度,因为我们不清除有多少子盒子,有多少内容。经常的做法会让内容撑开父盒子的高度。 但是如果父盒子中有子盒子浮动了之后,就会影响到后面的盒子,因为浮动元素脱离了标准流。会把后面还在标准流的盒子覆盖,解决这个问题的方法就要清除浮动

原理图



如何清除浮动?

清除浮动其实叫做 闭合浮动 更合适,因为是把浮动的元素圈起来,让父元素闭合出口和入口不让他们出来影响其他的元素。 在CSS中,clear属性用于清除浮动,其基本语法格式如下:

选择器 { clear : 属性值 ; }
/*属性值为left,清除左侧浮动的影响
  属性值为right,清除右侧浮动的影响
  属性值为both,同时清除左右两侧浮动的影响*/
复制代码

1. 额外标签法

1.1 末尾标签法

通过在浮动元素的末尾添加一个空的标签。这是W3C推荐的做法,虽然比较简单,但是添加了无意义的标签,结构化比较差,所以不推荐使用。下面三种写法都适用:

<!--写法一:直接用style-->
<div style="clear:both"></div>

<!--写法二:使用clear类-->
<style>
.clear { clear:both }
</style>
<div class="clear"></div>

<!--写法三:可以使用br等别的块级元素来清除浮动-->
<style>
.clear { clear:both }
</style>
<br class="clear" />

1.2 内部标签法

把div放进父盒子里,这样盒子会撑开,一般也不会用。

2. overflow

给父级元素添加overflow样式方法。

这种方法代码比较简洁,可以通过触发BFC方式,但是因为本身overflow的本质是 溢出隐藏 的效果,所以有的时候也会有一些问题存在,比如内容增多的时候不会自动换行导致内容被隐藏掉,无法显示出要溢出的元素。

.father {
      overflow: auto;  
    /* 加上这句话,就可以清除浮动   overflow = hidden|auto|scroll 都可以实现*/
  }
复制代码

3. 伪元素法(最常用)

3.1 使用after伪元素清除浮动

after是在父元素中加一个盒子,这个元素是通过css添加上去的,符合闭合浮动思想,结构语义化正确。 父元素中加一个类名为clearfix 。但是这个方法IE6-IE7不识别,要进行兼容,使用zoom:1触发hasLayout来清除浮动

代表网站:百度、淘宝、网易等

.clearfix:after{
    content:".";  /*尽量不要为空,一般写一个点*/
    height:0;     /*盒子高度为0,看不见*/
    display:block;    /*插入伪元素是行内元素,要转化为块级元素*/
    visibility:hidden;      /*content有内容,将元素隐藏*/
    clear:both;  
}

.clearfix {
    *zoom: 1;   /*  *只有IE6,7识别 */
}
复制代码

3.2 after伪元素空余字符法

父元素中加一个类名为clearfix,也需要兼容IE6-IE7

在Unicode字符里有一个“零宽度空格”,即U+200B,代替“.”,可以减少代码量,不再使用visibility:hidden

代表网站:阿里巴巴

.clearfix::after{
    content:"\200B";   /* content:'\0200'; 也可以 */
    display:block;
    height:0;
    clear:both;
}

.clearfix {
    *zoom: 1; 
}
复制代码

3.3 使用before和after双伪元素清除浮动(推荐)

这种方法完全符合闭合浮动思想。给父元素加一个类名为clearfix,需要兼容IE6-IE7

代表网站:小米、腾讯

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

三种方法总结

©copyright burning.

最后在这里说一下,目前在职web前端开发,如果你现在在学习web前端,在整个前端入门的学习过程当中,有遇见任何关于学习方法,学习路线,学习效率等方面的问题,或者缺乏基础入门的视频教程,前端面试题,学习手册,开发工具,PDF文档书籍教程,都可以随时关注并私信我:前端 ,系统自动坚持会发送交流圈子,可以来自行获取下载。


作者:顽皮的雪狐七七
链接:https://juejin.cn/post/6901903789197197325
来源:掘金

、浮动布局

  • 浮动:元素就像漂浮起来了,不占页面的位置了
  • 原理:使当前元素脱离普通文档流
  • 属性:float | left| right| none
  • 特点:元素浮动之后不占据原来的位置(脱标)
  • 浮动的盒子在一行上显示,行内元素浮动之后转换为行内块元素
  • 影响:因为不占页面位置了,导致整个布局混乱。
  • 脱离文档流后,如果父元素的高度是靠子元素撑起来的就会出现高度坍塌,父元素的高度会变成0

二、清除浮动

当父盒子没有定义高度,嵌套的盒子浮动之后,下边的元素发生位置错误,这时候就需要清除浮动。

  • 含义:清除浮动不是不用浮动,清除浮动产生的不利影响。
  • 方法

1. clear: left | right | both,通常都是使用clear:both属性

2. 通过在浮动元素的末尾添加一个空元素,设置 clear:both属性来清除浮动,但是这个方法成本太高,额外添加了一个元素,会让你多写很多的代码,且后期难以维护

3.通过设置父元素 overflow 或者display:table 属性来闭合浮动,给父元素添加overflow:hidden

4.伪元素清除浮动 这是最好的方法,推荐使用


如果喜欢点击加关注,有什么问题或者建议可以在下方评论留言哦~~

. 前言

CSS世界中的float属性是一个年代非常久远的属性。虽然最初创造浮动并不是为了用于页面布局,但它在布局方面表现得很出色。然而为了理解浮动,我们首先必须牢记它的设计初衷。Web诞生之初,带宽就那么一点点,我们能够做到的也只是展示文字以及零星图片而已,怎么可能浮动设计的目的就是为了实现各种砖头式的复杂布局呢?那个年代复杂布局都是用<table>实现的。既然这样,那float属性设计的目的究竟是什么呢?


2 浮动的本质

很简单,一句话:浮动的本质就是为了实现文字环绕效果。而这种文字环绕,主要指的就是文字环绕图片显示的效果。所以,大家应该也多少对为什么老IE浏览器与浮动相关的bug一火车都装不下有些了解了吧!人家的功能本来就很单纯,只是让文字可以绕着图片跑,你偏要各种布局,结果撑不住了吧!

所以说:浮动是魔鬼,少砌砖头、少浮动,要更多地去挖掘CSS世界本身的“流动性”和“自适应性”,以构建能够适用于各种环境的高质量的网页布局。好的网页应该如同好的建筑。传统的楼房是典型的“刚”式结构,砖头加楼板,问题不言而喻,一个小小的地震可能就被夷为平地;而好的楼房应该是有“柔”在其中,也就是高质量的钢筋结构,当地震导致房屋摇晃的时候,可以通过钢筋的“柔性”卸力而保障整体结构的稳固。台风袭来,很少见到说柔弱的柳树被吹倒,反而会经常看到坚固的电线杆被风吹倒的消息,道理其实也类似。


3 浮动的特性

浮动有三个关键字可以选择,left为向左浮动,right为向右浮动,none为不浮动。无论是行内元素(inline)还是块级元素(block),设置浮动后都会变成块级元素。但表现得却更像行内块元素(inline-block),因为在没有明确宽度的时候,宽度会随着内容自适应,而不是占据一行。

过去,浮动的行为经常受到浏览器bug的干扰,特别是在IE6和IE7中。幸亏这些浏览器几乎已经淡出市场了,我们不必再担心那些bug了。现在我们可以保证各种浏览器对浮动的处理是一致的。但是浮动仍有一些行为会让你措手不及。这些并不是bug,而是因为浮动严格遵循了标准。让我们来看看浮动如何工作,以及怎样调整浮动的行为来实现理想的布局。

float都有哪些有意思的特性呢?具体如下:

  • 包裹性

所谓“包裹性”,由“包裹”和“自适应性”两部分组成。包裹假设浮动元素父元素宽度180px,浮动元素子元素是一个120px宽度的图片,则此时浮动元素宽度表现为“包裹”,就是里面图片的宽度120px,代码如下:

.div { width: 180px; }
.float { float: left; }
.float img { width: 120px; }
<div class="div">  
    <div class="float">  
        <img src="float.jpg">  
    </div>
</div>

自适应性,如果浮动元素的子元素不只是一张120px宽度的图片,还有一大波普通的文字,例如:

<div class="father">
    <div class="float">   
        <img src="float.jpg">大家好,我是码农洞见。 
    </div>
</div>

则此时浮动元素宽度就自适应父元素的180px宽度,最终的宽度表现也是180px。

  • 块状化并格式化上下文

块状化的意思是,元素一旦float的属性值不为none,则其display计算值就是block或者table。

  • 破坏文档流

float通过破坏正常CSS流实现CSS环绕,带来了烦人的“高度塌陷”的问题,然而,凡事都具有两面性,只要了解透彻,说不定就可以变废为宝、化腐朽为神奇。例如。我们可以利用float破坏CSS正常流的特性,实现两栏或多栏的自适应布局。


4 清除浮动

浮动会影响周围元素,并且还会引发很多意想不到的问题。在CSS中,我们可以使用clear属性来清除浮动带来的影响。clear属性语法如下:

clear: none | left | right | both

在实际开发中,我们几乎不会使用“clear:left”或“clear:right”来单独清除左浮动或右浮动,往往都是直截了当地使用“clear:both”来把所有浮动清除,既简单又省事。也就是说,我们只需要记住“clear:both”就可以了。


5 总结

通过阅读本文我们了解到浮动的设计初衷是让文字围绕一个元素排列,但有时这种效果并不是我们想要的。使用清除浮动来包含浮动元素。所谓生生相克,既然有破坏,就有保护其他元素不被破坏的属性。总之,只有深入理解浮动的工作原理,勤加练习才有可能避开常见的陷阱。达到选择合适的工具来实现想要的效果。


6 最后的最后

为初学者提供学习指南,为从业者提供参考价值。我坚信码农也具有产生洞见的能力。关注【码农洞见】,一起学习和交流吧!