CSS 入门

第7回浮动（全16回）

全14回
2018年08月09日发布

啥是 CSS？

CSS的全名是层叠样式表。官方的解释，我就不细说了，因为就算细说了，对新手朋友们来说，听得还是一脸懵逼。那我们就用最通俗的说法来讲，到底啥是CSS？

如果说HTML就是做房子的搭建好的钢筋结构，那么CSS就是做装修。

爱美之心，人皆有之。话说亚洲呢，有三大神术，韩国的整容术、日本的化妆术、还有咱们中国的 PS 术。我们上次学习了HTML基础课程，单纯只用那些标签做出来的东西，确实是非常简陋的。你想让它变得好看，那么对于我们程序员来说，也有一种神术，这就是CSS技术了。

CSS2 与 CSS3

CSS3是新一代的CSS，里面多了很多有用的新特性，例如3D动画、Flex布局等等。光CSS 3这些新知识就足够拆成好几部课程来讲解了。不过无论是哪个版本的CSS，基础部分都是一模一样的。

我们这一次讲的是CSS的基础课程，针对的是只会点HTML标签的新手朋友，所以不会讲那么深入。当然所讲内容也会涵盖部分CSS3的属性。

关于编辑器的选择

依旧还是老三样，课程里我还是继续用WebStorm做演示。

Sublime Text
VS Code
WebStrom

开发浏览器的选择

依然也只推荐Chrome，至于其他的浏览器，非常不推荐开发使用。好了，介绍就这么点吧，还是赶紧进入正题，开始学习CSS的选择器。

CSS 入门（全14回）

这一节，我们要讲float也就是浮动了，浮动在CSS是非常非常重要的概念。大部分常见的页面排版布局都是要靠他实现。

还有float的意思是浮动，而不是移动。大家思考下，这两个词，到底有什么区别？所谓的浮动，有一个浮字，表示它是漂浮到文档上面来了，它真正的术语叫做脱离文档流。

先来看一个基本的代码。

<html>
<head>
    <meta charset="utf-8">

    <style>
        #parent {
            background-color: yellow;
            width: 800px;
            border:1px solid;
        }

        #child1, #child2 {
            width: 300px;
            height: 300px;
        }

        #child1 {
            background-color: darkgrey;
        }

        #child2 {
            background-color: #1f99b0;
        }
    </style>
</head>
<body>
<div id="parent">
    <div id="child1"></div>
    <div id="child2"></div>
</div>
</body>
</html>

一个叫做parent的div，包住了两个小div。分别给它们设置了一点基础样式。最下面黄色的就是parent了。左侧的两个分别是child1和child2。

float浮动

实验 1，一个子元素浮动

现在就可以来试试浮动，到底是怎么回事。给第一个子元素，也就是灰色的child1，右浮动。

#child1 {
    /* ... */

    float: right;
}

这时候，刷新会发现。灰色的div到右侧去了，并且父元素的高度，变成了之前的一半。关于这个现象，我们用实物来演示一下。

float浮动

浮动之前，有两个div在父元素里面。两个子元素div，自己都要占据一整行，它们是上下排列的。父元素只设置了宽，并没有设置高，而两个子元素，是设置了高的。父元素parent所看到的高，是由两个子元素撑起来的。它的高度，就等于两个子div的高度之和。

现在让灰色的子元素右浮动后，它会脱离文档流，来到文档的上方。和原来的parant、child2不在同一个层面上了。也就说parent父元素里面，现在只有一个child2了。那父元素高度，其实就等同于，现在还在同一层面上child2的高度。

这就是浮动的基础概念了，大家一定要清楚它是浮起来了，并不只是简单的移动。

实验 2，所有子元素都浮动

这次，我们给上面代码的基础上，给child2也加一个右浮动。

#child2 {
    /* ... */

    float: right;
}

现在大家先猜一下会发生什么变化？发现我们的黄色的父元素居然不见了，顶部出现了一条线。这又是咋回事呢？

两个元素右浮动

好，大家还是来看实物演示。刚才灰色的子元素先右浮动了，父元素里，只剩下一个蓝绿色的子元素，所以高度坍塌为一半。这时候如果蓝绿色的子元素也右浮动起来了，那大家想想，父元素里，还有东西吗？

现在它里面根本没有任何东西了，这就导致它的高度完全坍塌掉，我们能看到的父元素，就只剩上下边框的这两根线条了。

最后大家还需要注意下顺序问题。刚开始是灰色在上面的，它先右浮动后，会到父元素最右边。蓝绿色的也右浮动，因为最右边已经有东西存在了。所以它会在灰色div的左边。

思考一个问题

如下代码，会呈现怎样的布局？

<html>
<head>
    <meta charset="utf-8">

    <style>
        #parent {
            background-color: yellow;
            width: 800px;
            border:1px solid;
        }

        #child1, #child2 {
            width: 300px;
            height: 300px;
        }

        #child1 {
            background-color: darkgrey;
            float: left;
        }

        #child2 {
            background-color: #1f99b0;
        }
    </style>
</head>
<body>
<div id="parent">
    <div id="child1"></div>
    <div id="child2"></div>
</div>
</body>
</html>

float会盖在另一元素上

发现灰色的div直接把蓝绿色的div盖住了。你是否理解这是为什么？

【笔记功能】
上课内容和想要记住的要点，可以很方便的记录在笔记中。
请登录后再使用！

根据会员不同，笔记有不同的数量限制。

免费会员	大会员	线下班会员
5枚	无限制	无限制

升级会员，或者删除笔记可以添加新的笔记。

关闭

CSS 入门

第7回浮动（全16回）

啥是 CSS？

CSS2 与 CSS3

关于编辑器的选择

开发浏览器的选择

CSS 入门（全14回）

【课程介绍】

【CSS 的基础选择器】

【后代与子类选择器】

【常用的文字样式设置（font）】

【宽、高与边框（width/height/border）】

【背景色与背景图】

【浮动】

【清除浮动与恢复盒子高度】

【内边距（padding）与外边距（margin）】

【块级元素与行内元素】

【相对定位与绝对定位】

【圆角（border-radius）与超出隐藏（overflow）】

【超链接的样式】

【列表（ul、li）】

实验 1，一个子元素浮动

实验 2，所有子元素都浮动

思考一个问题

CSS 入门

第7回 浮动（全16回）

啥是 CSS？

CSS2 与 CSS3

关于编辑器的选择

开发浏览器的选择

CSS 入门 （全14回）

【课程介绍】

【CSS 的基础选择器】

【后代与子类选择器】

【常用的文字样式设置（font）】

【宽、高与边框（width/height/border）】

【背景色与背景图】

【浮动】

【清除浮动与恢复盒子高度】

【内边距（padding）与外边距（margin）】

【块级元素与行内元素】

【相对定位与绝对定位】

【圆角（border-radius）与超出隐藏（overflow）】

【超链接的样式】

【列表（ul、li）】

实验 1，一个子元素浮动

实验 2，所有子元素都浮动

思考一个问题

如果您对此课程感到满意，请打赏主讲教师！

第7回浮动（全16回）

CSS 入门（全14回）