共计 1333 个字符，预计需要花费 4 分钟才能阅读完成。
这节课，咱们学习一个新的网页布局办法——浮动。
假如这是页面上的三个布局容器，别离具备本人的宽度、高度和色彩。很分明的看到，这三个容器是从上向下顺次纵向排列的，合乎页面容器一般文档流的排列规定。
如果想要让它们这样的横向排列，该如何实现呢？
你很快想到：能够利用款式的元素类型常识，通过转换元素的类型，实现这样的横向显示成果。
首先，将这些容器设置为行内元素类型，你会发现，三个容器能够横向排列了，可是容器的宽度和高度变小了，仿佛只有文本的大小。显然，行内元素类型是不能实现成果的。
回归到原始成果。这时，你又想到了行内块元素类型，它应该能解决问题了。于是将容器设置为行内块元素，你会发现：尽管容器的宽度和高度保留了，然而元素与元素之间有间隙，这个间隙是不可避免的。所以行内块元素类型，也不能实现想要的成果。
这个问题到底该如何解决呢？这就要请出明天的主嘉宾——浮动。
再次回归到原始成果，先来看一下容器浮动当前的特点：
给一号容器增加浮动，你会发现二号容器进行了补位。这是为什么呢？起因是容器浮动当前会脱离规范文档流，相当于飘起来了。
在二维立体看，不是很直观。我来给你转换一个角度，从电脑屏幕的一侧去观看平面的成果 默认纵向排列的三个容器。如果给一号增加浮动，它会脱离文档流，并且不占据原来的地位，二号容器随之下来补地位。
浮动布局的特点理解了当前。就能够用款式实现它了，浮动款式的属性名为 float，它的值别离有 left：左侧浮动。right：右侧浮动。none：不浮动。
拿左右浮动为例演示细节，给一号容器增加 float 款式属性。将它的值设置为 left，很分明的看到一号容器不占据页面空间了，前面的容器下来补位。将它的值设置为 right，一号容器跑到右侧，前面的元素占据了它的地位。
如果不给一号容器增加浮动，只给二号容器增加浮动会有什么样的成果呢？当只给二号容器增加左侧浮动的时候。你会发现只有三号容器向上补位了，给二号容器增加右浮动，此时它跑到了右侧，三号容器向上补位。
不难发现，浮动只能让容器在以后所在行左侧或右侧排列。
持续看成果，当给一号容器增加左浮动，同时给二号容器也增加左浮动之后，你会看到两个容器都脱离了文档流，在一行中显示了，并且容器之间没有间隙，持续给三号容器也增加左浮动，三个容器就能够实现完满的横向排列了。
这时能够得出结论：实现多个容器横向排列，只须要给所有的容器增加浮动款式即可，接下来我带你看一个实在利用浮动布局的网站案例。
千锋教育官网首页中的导航条，就是由若干个容器横向排列的布局。通过观察发现，这个导航条由无序列表组成，也就是让若干个 li 元素横向排列，并且每一个 li 元素都有本人的尺寸和色彩。
我当时筹备好了一个根底构造，设置好 li 元素的一些款式后，在浏览器观看成果，会看到它们默认是纵向排列的。
当初，实现让这些 li 容器横向排列，只须要给这个 li 选择器增加 float：left，左浮动款式就能够了，这个款式会作用于全副 li 容器。
再来到看一下成果，横向排列的成果实现了！
CSS 浮动的基础知识咱们就讲完了。最初给你留一个思考题，子元素设置浮动当前 父元素是否须要设置高度呢？
本篇文章相干的教程链接：https://www.bilibili.com/vide…