黑马程序员技术交流社区
标题:
对清除浮动代码的分析与理解
[打印本页]
作者:
蛋壳ya
时间:
2019-11-25 22:19
标题:
对清除浮动代码的分析与理解
在横向布局时，我们常常会使用浮动。而有时候由于我们不确定子元素的数量，不方便给父元素设置高度。浮动的元素是脱离了标准流不占有位置的，这时我们就会发现，浮动的子元素无法撑开父元素。父盒子的高度为0，下面的盒子就会上移，影响了整个页面的布局。这种时候我们就需要清除浮动了，更确切的来说，是清除浮动带来的影响。
在css的课程中我们学到了三种清除浮动的方法，我对这三种方法进行简单的总结与分析，并结合所学知识做了一些自定义清除浮动代码的尝试，在这里将我的一些理解分享给大家。
在清除浮动之前，我们首先应该知道的是clear属性，该属性用来规定元素的哪一侧不允许其他元素浮动。有三个取值：none、left、right、both。none是clear属性的默认值。也就是不清除浮动。left指清除左侧元素的浮动；right指清除右侧元素的浮动；both指同时清除左右两侧元素的浮动。
方法一是额外标签法，也叫隔墙法。具体做法是在需要清除浮动的父元素的最后一个子元素后添加一个空标签（块级元素），给该标签添加样式：clear:both/left;。优点是通俗易懂、书写方便，但是该方法增加了html标签，使结构变得冗余复杂。
方法二是给父级元素添加属性overflow:hidden/auto/scroll;常取值hidden。优点是代码简洁、书写方便。但是overflow:hidden;会将溢出元素的部分隐藏掉。如果我们在该部分使用了定位，有超出设计的时候，这种方法就不适用了。
方法三是给父级元素添加after伪元素。该方法使用普遍，百度、淘宝、网易等大型网站都有使用，是我重点想要分析理解的方法。这种方法的优点是没有增加新标签，结构简单。但是after伪元素是css3的新特性，iE9以上的版本才使用，存在兼容问题。移动端可能使用得更加广泛。它是在css样式中利用after伪元素定义一个类，需要子元素浮动的父级元素可以直接调用这个类名来达到清除浮动的目的。一次定义多次调用，虽然定义代码有点繁琐但实际使用时非常方便。
这是淘宝等网站使用的源码：
.clearfix :after{
content: ’’;
display: block;
height:0;
clear: both;
visibility:hidden;
}
.clearfix {
*zoom:1;
}
以下是我测试过具有清除浮动功能的最简练的代码：
.clearfix: :after{
content: ’’;
display: block;
clear: both;
}
我们先逐行分析一下这些代码，after前用单冒号和双冒号都可以，单冒号是为了兼容低版本的的浏览器，即使写单冒号也会被浏览器解析为双冒号。.clearfix: :after{}是指在元素内部的后面创建新元素。content: ’’;是指创建的元素内容为空。display: block;是指将元素转化为块级元素，因为创建的伪元素默认为行内元素。clear: both;则是我们上面已经解释过的，清除元素左右元素的浮动。
那么两相比较多出的那些代码是什么意思呢，有必要书写吗？接下来我们来继续分析分析。
直接看我们可知height:0;和visibility:hidden;应该是用来清除新创建元素的体积和内容的，为什么要写这两行代码呢，这是为了防止我们手误不小心给content中加上了内容。有了这两行代码，我们的清除浮动的类会更严谨。如果content: ’1’;新创建的块级元素中有了1这个数字，盒子就会被撑开，占有位置影响布局。height:0;使我们新建的盒子没有高度也就是没有体积，但即使盒子不占位了，“1”这个数字还是会存在，visibility:hidden;就是用来隐藏这个“1”的。那么由此我想到，overflow:hidden;或者display:none;可以替换它吗？经过测试，display:hidden;是行不通的，因为它会层叠掉display:block;导致代码直接失效。而overflow:hidden;似乎可以实现与visibility:hidden;同样的效果。最后，.clearfix {*zoom:1;}则是用来解决使用伪元素带来的兼容性问题的。综合来看，伪元素清除浮动的方法几乎就没有弊端了，初学者也可以随意调用不会出问题。
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2