狂神css视频笔记17课-浮动

浮动和定位是重点。

第一点：标准文档流

第二点：块级元素、行内元素（内联元素）

块级元素：独占一行：h1-h6、p、ul-li、div

行内元素：不独占一行：span、a、img

行内元素可以包含在块级元素当中，但是块级元素不能够包含在行内元素当中。

第三点：做QQ导航栏

这里只是一个介绍的例子。

想要做导航栏，就是把ul-li变成了inline-block。

这个导航栏是要闭着眼睛就要写的。

上面的就是关于display的说明。

第四点：浮动

刚才发给同学们示例代码。

首先，自己定义三张图。

然后用样式画一些边框就可以了。

然后是一些html代码：

得到的效果，就是这个鬼样子：

现在默认都是块元素，一块一块的，现在就是想要让他们变成一个行内元素，并且可以浮动。

1、首先就是display:inline-block。

改完之后，就变成了上面的这个鬼样子了。

2、第一张图片往左边浮动。

需要这样添加浮动：

浮动的意思，就是浮起来了，飘起来了。

上面这张图中，黑色框框的就是一个背景，两张图片，一个就是向左浮动的，一个就是向右浮动的。

上面这张图当中，两张图片都是向左浮动的，不仅仅向左浮动了，而且把原来的背景中的元素，向右边推了一下。

所以，感觉浮动是会有问题的。word当中文本环绕图片，是一个意思。

现在让这些玩意，全部往左边浮动：

得到的是下面的效果：

全部往右浮动，是下面的效果：

你的页面缩小了之后，自动就重新排版了，这个不是我们想要的效果。

明天我们就要解释这个问题。浮动的时候，边框会塌陷的。

我们就要想办法清除浮动。

其实也非常简单。

下面这张图，是没有清除浮动的效果：

上面都是向右浮动，一个贴着一个的。

我们使用clear:both就可以清除浮动了。

现在我们想要上面的图片，既有浮动的效果，又有块元素的效果。

第五点：总结

display是行内元素的一种玩法，但是更多的情况，我们还是会用float来实现的。

display是一种实现行内元素，排列的方式，但是，我们很多情况，都使用float。这是在标准文档流内的。float是可以飘起来的。就可以做很多事情。