clearfix:前端面试题-clearfix(清除浮动)

 2021-07-09 14:06    77  

1、概念浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止clearfix。

clearfix:前端面试题-clearfix(清除浮动)

由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样clearfix。

clearfix:前端面试题-clearfix(清除浮动)

2clearfix、影响导致父元素高度坍塌

clearfix:前端面试题-clearfix(清除浮动)

父元素中有子元素,并且父元素没有设置高度,子元素在父元素中浮动,结果必然是父元素的高度为0,这也就导致了父元素高度塌陷问题。

浮动脱离文档流,这个问题会对整个页面布局带来很大影响,如何解决高度坍塌问题,我们需要清除浮动。

3、清除1. clear属性的空标签

在浮动元素后添加一个空标签<div class="clear"></div>,并且在CSS中设置.clear{clear:both;},即可清理浮动。

原理:添加一个空标签,利用CSS提高的clear:both清除浮动,让父元素可以自动获取到高度

优点:简单,代码少,兼容所有浏览器

缺点:增加页面的标签,造成结构的混乱

建议:不推荐使用,此方法已经过时

2. :after伪元素

给浮动元素的容器添加一个clearfix的class,然后给这个class添加一个:after伪元素实现元素之后添加一个看不见的块元素(Block element)清理浮动。

原理:通过CSS伪元素在容器的内部元素之后添加一个看不见的空格“/20”或点“.” ,并且设置clear属性清除浮动。

优点:浏览器支持较好

缺点:clearfix这个class需要添加zoom: 1(触发haslayout),才能支持IE6和IE7浏览器

建议:推荐使用,设置公共类,减少CSS代码

------

切图网首推前端项目实战培训——切入口(qierukou.com),开班在即,报名从速。

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

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

clearfix:前端面试题-clearfix(清除浮动)

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

clearfix:前端面试题-clearfix(清除浮动)

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

原理图

如何清除浮动?清除浮动其实叫做 闭合浮动 更合适,因为是把浮动的元素圈起来,让父元素闭合出口和入口不让他们出来影响其他的元素。 在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文档书籍教程,都可以随时关注并私信我:前端 ,系统自动坚持会发送交流圈子,可以来自行获取下载。

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

本文标签:哪些Spring核心嵌套循环详解

原文链接:https://www.xgfox.com/jsyd/708.html

本文版权:如无特别标注,本站文章均为原创。