浮动之后的那些事儿 - 清浮动操作

本文内容概要:

1 上周作业讲解

2 浮动之后的特性

3 如何清浮动

4 实例操作

上周我们讲解了如何去实现页面的简单布局,用了三种基本的CSS选择器来控制标签的样式,同时通过盒模型为每个标签设置了大小与位置,最后为了让多个块元素展示在同一行,我们讲解了浮动操作。那今天我们继续浮动这个话题,来讲讲浮动之后发生的那些事~~~

一、上周作业讲解

在讲解前,我们一起来看看上周留给大家的作业,相信大家参照上周的知识点都可以把作业布局出来,那我们一起来看看这个作业具体是怎做出来的。如果想了解作业的参考答案,请前往GitHub:https://github.com/iceswan/htmlDemo/tree/master/homework/%E6%B5%AE%E5%8A%A8%E4%BD%9C%E4%B8%9A%E8%AE%B2%E8%A7%A3%20-%20HTML5%E5%AD%A6%E5%A0%82

代码效果如下:

参照上面的代码,我们就完成了上周的作业了,但是这时候我们倘若打开浏览器的控制台去查看每一个块的样式的时候,会发现一个比较奇怪的想象,我的类名为wrap的父级div里面明明放了那么那么多的块,怎么我的高度变成了0了,这到底是怎么一回事啊?继续看下去就明白啦~~~

父级高度为0的效果如下:

二、浮动之后发生的那些事

浮动会导致当前元素脱离文档流,此时会对父级产生影响;

子元素浮动,父级元素会出现高度为0的现象,这个现象叫做高度塌陷;即是上图所看到的父级高度为0的效果。

我们说这时候可以为父级标签添加固定高度,但是在实际开发当中我们希望内容能够撑开高度。对于不浮动的元素来说,它们是能够撑开外部div的高度的,但是一旦浮动,也就意味着元素脱离文档流,父级div就相当于没有了内容。这时是没有办法实现内容撑开高度的。此时我们需要进行清除浮动对布局造成的一系列影响,简称:清浮动。所以接下来我们主要讲解的就是清浮动的几种方法以及各方法的优缺点了。

三、 清浮动的语法

我们要讲解清浮动,那必然要先看看清浮动的语法到底是怎么写的。

清浮动的基本语法:

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

代码解释:

left:在左侧不允许浮动元素。

right:在右侧不允许浮动元素。

both:在左右两侧均不允许浮动元素。

none:默认值。允许浮动元素出现在两侧。

inherit:规定应该从父元素继承 clear 属性的值。

四、 清浮动操作

了解了主要的清浮动语法之后,我们主要要来看看清浮动的方法具体有哪些,都是怎么去书写的。

今天我们主要讲解的清浮动方法有:空标签清浮动、br标签清浮动、父级div设置overflow属性、父级元素设置浮动、after伪元素清浮动。接下我们就一起来把这些方法一个个的掰扯清楚来吧。

1 空标签清浮动

所谓的空标签清浮动就是使用一个空的没有存放任何内容的标签来书写清浮动的语句,具体代码如下:

<style>
        .main div {
            float: left;
            width: 200px;
            height: 200px;
            margin-right: 20px;
            background: #fcf;
        }
        .footer {
            width: 420px;
            height: 100px;
            background: red;
        }
        .clear {
            clear: both;
            /*消除默认行高的影响*/
            height: 0;
        }
</style>
<div class="wrap">
    <div class="main">
        <div>梦幻雪冰</div>
        <div>独行冰海</div>
        <p class="clear"></p>
    </div>
    <div class="footer"></div>    
</div>

代码解释:

clear:both是清除浮动的方法,height:0防止默认高度影响。

优点:通俗易懂,容易掌握。

缺点:会添加大量无语义空标签,结构与表现未分离,不利于维护。

使用:在浮动元素末尾加一个任意空标签,空标签设置clear:both和height:0;

2 br标签清浮动

借助单标签br来实现清浮动,具体代码书写如下:

<style>
    .main div {
        float: left;
        width: 200px;
        height: 200px;
        margin-right: 20px;
        background: #fcf;
    }
    .footer {
        width: 420px;
        height: 100px;
        background: red;
    }
</style>
<div class="wrap">
    <div class="main">
        <div>HTML5学堂</div>
        <div>H5Course</div>
        <!-- br标签自带的属性 -->
        <br clear="all" />
    </div>
    <div class="footer"></div>    
</div>

代码解释:

优点:比空标签方式语义稍强,代码量少。

缺点:结构与表现未分离,不推荐。

使用:br标签清除浮动类似空标签清浮动,同样在float元素后面加一个br标签,只不过br存在一个属性clear只要将br标签里的clear属性设置成all即可。如: clear="all"。

3 父元素设置overflow:hidden/auto

给父级div设置overflow,书写hidden或者auto属性值即可用于清浮动操作,代码如下:

<style>
    .main {
        overflow: auto / hidden;
    }
    .main div {
        float: left;
        width: 200px;
        height: 200px;
        margin-right: 20px;
        background: #fcf;
    }
    .footer {
        width: 420px;
        height: 100px;
        background: red;
    }
</style>
<div class="wrap">
    <div class="main">
        <div>HTML5学堂</div>
        <div>H5Course</div>
    </div>
    <div class="footer"></div>    
</div>

代码解释:

优点:语义化没问题,同时代码量少。

缺点:内容多的时候,会被隐藏,无法显示需要溢出的元素。

使用:在父级设置一个overflow:hidden即可。注意一点,不是所有设置overflow:hidden都能清除浮动。

4 父元素设置浮动

当内部子元素浮动之后,给父级元素也设置浮动来实现清浮动,具体代码如下:

<style>
    .main {
        float: left;
    }
    .main div {
        float: left;
        width: 200px;
        height: 200px;
        margin-right: 20px;
        background: #fcf;
    }
    .footer {
        width: 420px;
        height: 100px;
        background: red;
    }
</style>
<div class="wrap">
    <div class="main">
        <div>HTML5学堂</div>
        <div>H5Course</div>
    </div>
    <div class="footer"></div>    
</div>

代码解释:

优点:语义化没问题,同时代码量少。

缺点:父元素的相邻元素布局受影响——继续设置浮动操作,直到body为止。

使用:浮动元素的父级也设置浮动,只不过会影响其他的布局。

5 after伪元素清浮动

借助伪元素来实现清浮动操作,当前开发中用的最多的存在,具体代码如下:

<style>
    .main div {
        float: left;
        width: 200px;
        height: 200px;
        margin-right: 20px;
        background: #fcf;
    }
    .footer {
        width: 420px;
        height: 100px;
        background: red;
    }
    .clearfix:after {
        clear:both;
        display:block;
        height:0;
        content:"\200B";
    }
    .clearfix {
        *zoom:1;
    }
</style>
<div class="wrap">
    <div class="main clearfix">
        <div>HTML5学堂</div>
        <div>H5Course</div>
    </div>
    <div class="footer"></div>    
</div>

代码解释:

优点:语义化和结构都没问题。

缺点:复用方式不当,会造成代码量增加。

兼容:由于IE6-7不支持after,使用zoom:1 触发hasLayout。

核心代码:

.clearfix:after {
    content:"\200B"; 
    display:block; 
    height:0; 
    clear:both;
}
.clearfix {
    *zoom:1; 
}

原理解释:

1) display: block; 使伪元素的展示特性以块级元素显示,它默认的展示特性是行元素的展示特性。

2) height: 0; 避免生成内容破坏原有布局的高度。

3) Unicode: 字符里有一个“零宽度空格”,也就是U+200B,这个字符本身是不可见的。

4) zoom: 1; 由于IE6-7不支持:after,使用zoom:1触发hasLayout。

我们今天对于清浮动操作的5种方法就是讲解到这里了,大家可以照着我们给出的代码例子去敲一敲代码,看一下自己敲的效果,即能够明白这些方法的使用了。

五、课堂案例讲解

学完今天讲解完的清浮动的5种方法之后,大家一起来实现一个布局练习吧,小编这里主要就使用父级元素这种方法来操作了,感兴趣的可以把每一种方法都用一用。一起来看看这个案例吧。

<!DOCTYPE  html>
<html>
<head>
  <meta  charset="utf-8">
  <title>父级浮动</title>
  <link  rel="stylesheet"  href="reset.css">
  <style>
    /*一级布局*/
    .wrap  {
      width:  540px;
      height:  540px;
      margin:  0  auto;
    }
    .div1,.div2  {
      width:  540px;
      height:  270px;
    }
    /*二级布局*/
    .sdiv1  {
      float:  left;
      width:  135px;
      height:  270px;
      background:  #008000;
    }
    .sdiv2  {
      float:  left;
      width:  270px;
      height:  270px;
    }
    .sdiv3  {
      float:  left;
      width:  135px;
      height:  270px;
      background:  #808080;
    }
    .sdiv4  {
      float:  left;
      width:  200px;
      height:  270px;
      background:  #cdfffe;
    }
    .sdiv5  {
      float:  left;
      width:  340px;
      height:  270px;
      background:  #ffc0cb;
    }
    .box1  {
      height:  135px;
      background:  #ffffcd;
    }
    .sbox1  {
      float:  left;
      width:  135px;
      height:  135px;
      background:  #0000ff;
    }
    .sbox2  {
      float:  left;
      width:  135px;
      height:  135px;
      background:  #ffc0cb;
    }
  </style>
</head>
<body>
  <div  class="wrap">
    <div  class="div1">
      <div  class="sdiv1"></div>
      <div  class="sdiv2">
        <div  class="box1">
          <div  class="sbox1"></div>
          <div  class="sbox2"></div>
        </div>
        <div  class="box1"></div>
      </div>
      <div  class="sdiv3"></div>
    </div>
    <div  class="div2">
      <div  class="sdiv4"></div>
      <div  class="sdiv5"></div>
    </div>            
  </div>
</body>
</html>

代码的展示效果:

六、课后作业

根据今天所学的知识点,罗列出清浮动的几种方法。

并用自己的语言,尽可能完整的描述出“浮动与清浮动”(建议整理好语言逻辑,要说什么,先说什么,再说什么~~~)。

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-05-09

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端知识分享

第124天:移动web端-Bootstrap轮播图插件使用

> 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中 > 然后作出相应的样式调整

884
来自专栏用户2442861的专栏

HTML/CSS基础知识学习笔记

http://www.cnblogs.com/scue/p/4276339.html

441
来自专栏web前端

HTML+CSS基础

第一章 一、样式      1、行间样式,代码不可维护,不推荐      2、内联样式,不可重用,不推荐      3、外联样式,可重用,可维护,推荐     ...

1899
来自专栏Android点滴积累

Android高效内存之让你的图片省内存

Android高效内存之让你的图片省内存        在做内存优化的时候,我们发现除了解决内存泄露问题,剩下的就只有想办法减少真实的内存占用。而在App中,大...

19911
来自专栏小白客

Web前端基础【1】--HTML基础

HTML不是编程语言,是一种表现网页信息的符号标记语言。标记语言是一套标记,HTML使用标记来描述网页。Web浏览器的作用就是读取HTML文档,并以网页的形式显...

3388
来自专栏木子昭的博客

<干货>5分钟快速回顾HTML CSS

一.html (一)标签类型 1.块元素(独占一行!即使通过css设置宽度width,也会占一行的位置) div(无语义) 列表 ur/ol/li 段落 ...

2629
来自专栏flutter开发者

[Flutter Widget]ExpansionPanelList

在前面的文章中我们介绍了可以展开的带标题控件ExpansionTile的用法,在文章的最后还是按照惯例给大家留下了一个问题。

1262
来自专栏小白客

Web前端基础【2】--CSS基础

CSS指层叠样式表,用来定义如何显示HTML元素,一般和HTML配合使用。CSS样式表的目的是为了解决内容与表现分离的问题:即使同一个HTML文档也能表现出外观...

3166
来自专栏全沾开发(huā)

总结CSS3新特性(颜色篇)

总结CSS3新特性(颜色篇) 颜色: CSS3新增加了hsl(), hsla(), rgb(),rgba()四个函数来创建color值...

33612
来自专栏练小习的专栏

比例字体&等宽字体

我们都知道等宽字体和比例字体的区别,就在于比例字体(Monospaced Font)即每个字母宽度是按一定比例自动调整的,而等宽字体(Proportional ...

3466

扫码关注云+社区