欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

css清浮动

程序员文章站 2022-07-05 11:45:00
我们在平常做项目的时候,float这个css属性经常会用到。元素浮动会让元素脱离文档流,从而不能撑开父级的内容。今天我将展示常见的清除浮动的方法。 什么是浮动 浮动元素 脱离文档流 并且向左或者向右移动,直到浮动元素的边缘碰到父级框或者另一个浮动元素的边框为止。 浮动的影响 浮动元素会使得父级元素高 ......

我们在平常做项目的时候,float这个css属性经常会用到。元素浮动会让元素脱离文档流,从而不能撑开父级的内容。今天我将展示常见的清除浮动的方法。

什么是浮动

浮动元素脱离文档流并且向左或者向右移动,直到浮动元素的边缘碰到父级框或者另一个浮动元素的边框为止。

浮动的影响

浮动元素会使得父级元素高度塌陷

html:

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

css:

* { // 实际项目中不要用通配符*去设置样式
    margin: 0;
    padding: 0;
}
ul {
    border: 10px solid red;
}
li {
    width: 100px;
    height: 100px;
    margin-left: 10px;
    list-style: none;
    background: orange;
    float: left;
}

效果图:

css清浮动

由于浮动元素脱离文档流,不再占据原来的文档流空间,不能撑开父级的内容,所以父级的高度就不存在了。

下面我们将介绍清浮动的两个大类。

清浮动的方法

clear清浮动(clearfix方案)

在css中专门有一个来解决高度塌陷的属性,那就是我们常用的clear属性。clear的用法如下:

clear: none | right | left | both | inherit;

下面对clear值的解释来之w3c

  • none:默认值。允许浮动元素出现在两侧。
  • right:在右侧不允许浮动元素。
  • left:在左侧不允许浮动元素。
  • both:在左右两侧均不允许浮动元素。
  • inherit:规定应该从父元素继承 clear 属性的值。

我们清除浮动的时候常用clear: both;注意: clear属性只对块级元素起作用。

下面展示一个与clear值为both有关的例子。

html:

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

css:

* {
    margin: 0;
    padding: 0;
}
li {
    width: 100px;
    height: 100px;
    margin-left: 10px;
    list-style: none;
    background: orange;
    float: left;
    margin-bottom: 10px;
}
li:nth-child(3) {
    clear: both;
}

上面代码所渲染出来的效果是下面的图:

css清浮动

不知道当大家看到这个结果的时候,是不是开始怀疑w3c中的解释了。实际上clear值为both指的是让自身和前面的浮动元素不相邻。没错,是前面的,并不是前面后面都兼顾,所以上面的例子中展示的效果是两列而不是三列。

下面展示使用clear清浮动,接着最开始的代码,我们对其进行清浮动。(注意下面只展示在最开始代码中增加的代码)

css:

ul {
    zoom: 1;        // 为了兼容IE6/7
}
ul:after {          // 内联
    content: '';    // 内容为空字符是为了不影响本来的dom
    display: block; // 这里的值也可以是table | list-item,只要能够让伪类成为块级元素。
    clear: both;
}

效果图:

css清浮动

BFC清浮动

BFC的全称block formatting context,中文意思是“块级格式化上下文”。

BFC特性

“css世界的结界”(引自张鑫旭的《css世界》),在这个结界中内部子元素不管如何变化都不会对外部的元素有影响。BFC元素的margin不会发生折叠,因为margin折叠影响外部元素的布局。清除浮动,如果BFC不能够清除浮动,那么BFC元素高度就会塌陷,那么内部的元素就会影响到其他的元素的布局,这跟前面说的BFC元素内部的子元素不会影响外部元素相违背。

BFC的实现:(引自张鑫旭的《css世界》)

  • 根元素
  • float的值非none
  • overflow的值为auto、scroll、hidden
  • display的值为table-cell、table-caption和inline-block
  • position的值不为relative和static

css:

ul {
    overflow: auto; // 使浮动元素的父级成为BFC就行可以实现清浮动
}

效果如下图:

css清浮动

大家有可能会有疑问只要一句话实现BFC,那为什么我们还要用上面的clearfix方案?

overflow: auto;不支持IE6/7。overflow: hidden;不支持IE6,使用这个属性容器外的元素可能被隐藏。

但是,大家想下现在使用IE6/7/8的用户还有好多。我个人觉得现在我们没必要去管IE6/7/8,抛弃那部分用户对于我们的影响微不足道。上面这段话只是个人想法,并没有想过让他人必须这样想,如果大家对这段有什么不满请轻喷。

最后建议大家不要一味的使用clearfix方案。