本课我们学习一种新的网页布局方式——浮动。假设这是页面上的三个布局容器，每个都有自己的宽度、高度和颜色。可以清楚的看到这三个容器是从上到下垂直排列的，符合页面容器普通文档流的排列规则。如果要让它们这样横向排列，如何实现呢？你很快想到可以应用样式的元素类型的知识，通过转换元素的类型来实现这样的水平显示效果。首先，将这些容器设置为内联元素类型，你会发现三个容器可以水平排列，但是容器的宽高变小了，好像只有文字的大小。很明显，内联元素类型达不到这个效果。恢复原来的效果。这时候你又想到了内联块元素类型，应该可以解决问题。所以将容器设置为内联块元素，你会发现虽然容器的宽高都保留了下来，但是元素之间还是有间隙的，而这个间隙是不可避免的。因此，内联块元素类型达不到预期的效果。如何解决这个问题呢？这就要请来今天的重头嘉宾——飘。再次回到原来的效果，我们来看看漂浮后容器的特点：给1号容器加上漂浮，会发现2号容器已经被填满了。为什么是这样？原因是容器浮动后，会脱离标准的文档流，相当于浮动。在二维平面上看，不是很直观。我给你换个角度，从电脑屏幕的一侧看立体效果。三个容器默认垂直排列。如果给1号添加float，它会脱离文档流，不占原来的位置，2号容器会上去补位。了解浮动布局的特点后。您可以使用样式来实现它。浮动样式的属性名为float，其取值分别为left：左浮动。右：漂浮在右边。无：没有浮动。以左右浮动为例进行详细说明，在1号容器中添加浮动样式属性。将它的值设置为left，很明显1号容器不占用页面空间，后面的容器往上补。将它的值设置为right，容器一向右移动，后面的元素取代它的位置。1号容器不加float，2号容器只加float会有什么影响？仅向第二个容器添加左浮动时。你会发现只有3号容器是向上装的。在2号容器中加入右浮子。这时候它往右跑，3号容器装满了。不难发现，浮动只能将容器排列在当前行的左边或者右边。继续看效果。给第一个容器添加左浮动后，同时给第二个容器添加左浮动，你会看到两个容器从文档流中分离出来，显示在一行中，容器之间没有缝隙。继续给第三个容器加上leftfloating，三个容器就可以完美水平排列了。这时候我们可以得出一个结论：要实现多个容器的水平排列，只需要给所有的容器都添加浮动样式即可。下面给大家看一个真正应用浮动布局的网站案例。前锋教育官网首页的导航栏是由几个横向排列的容器组成的布局。通过观察，发现这个导航栏是由一个无序列表组成的，即水平排列若干个li元素，每个li元素都有自己的大小和颜色。我提前准备了一个基本结构。li元素设置了一些样式后，在浏览器中看效果，默认是竖排的。现在，要水平排列这些li容器，你只需要在li选择器中添加float:left，leftfloating样式就可以了。这种风格将适用于所有li容器。再来看看效果，水平排列的效果实现了！我们已经介绍了CSS浮动的基础知识。最后，我留给你一个思考问题。子元素设置浮动后，父元素还需要设置高度吗？本文相关教程链接：https://www.bilibili.com/video...
