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;
}

效果图:

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

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

清浮动的方法

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;
}

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

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

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

css:

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

效果图:

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就行可以实现清浮动
}

效果如下图:

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

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

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

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

推荐:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏一个小程序员的成长笔记

CSS深入理解学习笔记之float

1、float的历史   float设计的初衷仅仅是为了文字环绕效果。   示例代码: 1 <!DOCTYPE html PUBLIC "-//W3C//DT...

3675
来自专栏彭湖湾的编程世界

【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响

一.width:auto和width:100%的区别 1.width:100%的作用是占满它的参考元素的宽度。(一般情况下参考元素 == 父级元素,这里写成参考...

25511
来自专栏非著名程序员

基础篇章:React Native之Flexbox的讲解(Height and Width)

(友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间) 今天在讲解Flexbox之前,我们先讲解一下...

2237
来自专栏用户2442861的专栏

CSS float浮动的深入研究、详解及拓展(二)

by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wo...

790
来自专栏贺贺的前端工程师之路

CSS布局

普通流是默认定位方式,在普通流中元素框的位置由元素在html中的位置决定,元素position属性为static或继承来的static时就会按照普通流定位,这也...

922
来自专栏前端杂货铺

定位浮动拾遗

---恢复内容开始--- 浮动元素处在正常文档流上的浮动流上,浮动元素的渲染方式很特殊,首先按照正常文档流进行布局,然后将该元素从 文档流中取出并对该元素尽量向...

2987
来自专栏Nian糕的私人厨房

CSS Flex弹性盒布局

我在上一篇博文CSS 布局_2 Flex弹性盒里,对 Flex 弹性盒有着详细的介绍,这里就不再复述了,书写页面前,我们先来介绍一个之前没提到的知识点——伪类选...

1345
来自专栏一个小程序员的成长笔记

CSS深入理解学习笔记之absolute

1、absolute和float   拥有相同的特性表现:     ①包裹性(容器应用之后,可以包裹里面的内容); 1 <!doctype html> 2 ...

3374
来自专栏练小习的专栏

关于IE6下绝对定位元素莫名消失的问题

这是个很老的bug了,我想一般大家都遇到过,以前我是纯凭经验,让绝对定位的元素不挨着浮动元素就OK了,不过一直没去研究它形成的原因。今天做页面又遇到了这个可爱的...

18410
来自专栏葡萄城控件技术团队

React Native基础&入门教程:初步使用Flexbox布局

1215

扫码关注云+社区

领取腾讯云代金券