Document

--- theme: fancy --- # $\textcolor{469efc}{浮动}$ **浮动**，一个小小的知识点，但是大多数人都会忽视它，比如说初学css的小白们，现在把它拿出来，是因为**它居然是很多面试官的必问题**！来吧！话不多说，直接进正题！ ## $\textcolor{469efc}{一、浮动的特性}$ ### 1、**文字环绕** 现在来聊聊浮动的第一个特性吧，看下面的小例子： ``` Document

从语言的系属来看，我国56个民族使用的语言分别属于五大语系：汉藏语系、阿尔泰语系、南岛语系、南亚语系和印欧语系。汉藏语系分为汉语和藏缅、苗瑶、壮侗三个语族。属于藏缅语族的有藏、嘉戎、门巴、仓拉、珞巴、羌、普米、独龙、景颇、彝、傈僳、哈尼、拉祜、白、纳西、基诺、怒苏、阿侬、柔若、土家、载瓦、阿昌等语言；属于苗瑶语族的有苗、布努、勉等语言；属于壮侗语族的有壮、布依、傣、侗、水、仫佬、毛南、拉珈、黎、仡佬等语言。阿尔泰语系分为蒙古、突厥、满—通古斯三个语族。属于蒙古语族的有蒙古、达斡尔、东乡、东部裕固、土、保安等语言；属于突厥语族的有维吾尔、哈萨克、柯尔克孜、乌孜别克、塔塔尔、撒拉、西部裕固、图佤等语言；属于满—通古斯语族的有满、锡伯、赫哲、鄂温克、鄂伦春等语言。属于南岛语系的是高山族诸语言，还有回族的回辉话。属于南亚语系孟高棉语族的有佤、德昂、布朗、克木等语言。属于印欧语系的是属斯拉夫语族的俄语和属伊朗语族的塔吉克语。 [2]有些语言的系属尚未取得统一意见，如朝鲜语、京语等。

``` 这是页面效果： ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/64bb826071f946708626a7d89d5642a8~tplv-k3u1fbpfcp-watermark.image?) 当我们想要图片与文字处于同一行时，我们能想到很多种方法，比如用弹性布局，定位等等，现在有了浮动，一行代码就能完美呈现，那就是**在pic容器中加入float:left;这个样式**，于是，就有了这样的效果： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2d6dae2f9082445b9d771b24e9cdae38~tplv-k3u1fbpfcp-watermark.image?) 这就是浮动的第一个基本特性：**实现文字环绕效果**！ ### 2、**让块级元素同行显示，元素会脱离文档流，父容器的高度会塌陷** 我们设置三个容器，小红，小绿，小蓝 ``` Document

one

two

three

``` 页面如下： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d8df2032e22149c489682868063ee165~tplv-k3u1fbpfcp-watermark.image?) 我们现在知道可以**用float:left;属性实现同行显示**，那么我们就在小绿上加上这个属性吧！ ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/da0a26cf4ba547b7af63801c2eb52d95~tplv-k3u1fbpfcp-watermark.image?) 欸，咋变成这样了？原因是小绿设置了浮动属性，**浮动的元素会脱离文档流**，什么是文档流呢？举个例子，脱离文档流的容器好比逆子，那他爹（父容器）也不管他，那么布局也会向前推进，所以小蓝来到了小绿的位置，而小绿盖住了小蓝。我们还会发现一个问题，没加浮动属性时三个容器的**父容器**body高度对比加了浮动属性后父容器body高度，**塌陷**了！下面是效果对比图：

### 3、**让行内元素可以设置宽高** ``` Document

123

``` 我们知道，span是行内元素，无法设置宽高，但我们在span中加入**float:left;属性**后就有了相应的高度。下面是效果对比图：

### 4、**浮动元素可以设置margin，但是不能设置margin:0 auto;** 基于第三个特性的例子，我们来实现**三个span在x轴居中**的效果，如果我们用这个很简单的属性margin:0 auto;实现x轴居中： ``` span{ width: 100px; height: 100px; float: left; background: #e7caca; /* margin-left: 30px; */ margin: 0 auto; } ``` 运行之后我们发现这三个元素居然不会居中! 那我们就在span中删除float:left;这个属性，加上display:block;变成块级元素 ``` span{ width: 100px; height: 100px; /* float: left; */ background: #e7caca; /* margin-left: 30px; */ margin: 0 auto; display: block; } ``` 就可以实现居中啦，这就得出一个结论：**用margin:0 auto;实现x轴居中在有float: left;这个属性的情况下无效** ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/832d05c2d2c541c4b018119b4705c5e6~tplv-k3u1fbpfcp-watermark.image?) 那么我们试试在有float: left;这个属性的情况下用margin的其他属性呢，比如margin-left: 30px; ``` span{ width: 100px; height: 100px; float: left; background: #e7caca; margin-left: 30px; /* margin: 0 auto; display: block; */ } ``` 发现margin-left: 30px; 起效果了，所以**浮动元素可以设置margin（除了margin:0 auto;）** ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/abba21a5048c4ba6a14e57686c9522b4~tplv-k3u1fbpfcp-watermark.image?) *** ## $\textcolor{469efc}{二、清除浮动}$ But，虽然浮动很好用，但是他会造成一些不好的影响，比如说用浮动会导致父容器塌陷等等，所以，我们就需要清除浮动带来的负面效果。 ### 1、**直接设置父容器的高度** 听起来很直接简单，但是会导致一个问题，用户在不同设备上（比如手机和ipad）看到的父容器高度是相同的，这就带来了不好的用户体验，所以一般不使用此方法。 ### 2、**增加子容器，在子容器身上做清除浮动||给下面受影响的容器添加clear:both;** #### 1）在ul列表中加入一个div，给这个容器设置**clear:left;属性**来清除左浮动；反之，若给ul列表中的li设置右浮动，则用**clear:right;属性**来清除；当然，若既向左浮动又向右浮动，则用**clear:both;属性**来清除。 ``` Document

``` But，这种方式增加了一个不必要的空容器，所以也一般不采取此方法。 #### 2）在下面受影响的容器content中添加clear:both;属性 ``` Document

``` ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3b3e8734ed2b4fd980042fa3d2e40838~tplv-k3u1fbpfcp-watermark.image?) But,它并没有降低代码的耦合度，所以一般也不采用。 ### 3、**通过伪元素xx::after{content: '';clear: both;display: block;}** 伪元素的方法就很好的弥补了上述方法的缺点，代替了空容器div 继续上面的例子： ``` Document

``` 在增加了伪元素后，来看看效果： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/270ebaa74f224c32b428a814ad7d9d00~tplv-k3u1fbpfcp-watermark.image?) 清除浮动成功！这种办法应该是目前最nice的方法了。 ### 4、**借助BFC容器的特点，抵消掉浮动的负面影响** 好！问题来了，**什么是BFC容器**呢？ BFC全称Block formatting Context，是css渲染的一部分，主要决定盒子的布局和浮动相互影响的一个区域。那**怎么创建BFC容器**呢？通过添加以下属性： 1）浮动（float:left/float:right） 2）overflow:auto/hidden/scroll/overlay 3）display:inline-block 4）网格布局（grid/inline-grid） 5）表格布局（table/table-cell/table-caption/inline-table） 6）弹性布局（flex/inline-flex） 7）定位（absolute/fixed）继续上个例子，在ul中加入overflow: hidden;属性将其变为BFC容器： ``` Document

``` ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/89937254d8ff48b3adf952f5afe098e7~tplv-k3u1fbpfcp-watermark.image?) 清除浮动成功！同时可以看到**BFC容器计算高度时，会将浮动元素的高度也计算在内**，也维护一个常规的文档流。 *** ## $\textcolor{469efc}{扩展一下}$ BFC还可以解决**子容器和父容器**margin重叠的问题举个例子： box是**父容器**，top是其**子容器**，我们要实现下图效果： ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/72f16ceaebf0475c8b955cf4a8d6b473~tplv-k3u1fbpfcp-watermark.image?) 那么我们在box中加入margin-top: 100px; , 在top中加入margin-top: 50px; ``` Document

``` ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/17a5f1a9f0f84eb79d68c994e0c3d3ec~tplv-k3u1fbpfcp-watermark.image?) 发现蓝色容器top并没有距离父容器顶部50px距离，但我们**在父容器box中加入overflow: hidden;** 后就能达到效果啦！ *** 那我们又会想，BFC能不能解决**子容器之间**（top与bottom容器）的margin重叠问题呢？答案是：**不能**！解决方法：我们知道，**BFC容器包含创建该上下文元素的所有子元素，但不包括创建了新BFC的子元素的内部元素**,所以我们在bottom容器外加上一个类名为bfc的div，给这个div加上overflow: hidden; ，这样就把这个div变成了bfc容器。 ``` Document

``` 下图是最终效果： ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/993b9d0fa5a94ab2b1c4c0991aef8c88~tplv-k3u1fbpfcp-watermark.image?) $\textcolor{469efc}{结语}$ 看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～文章可能有一些错误，欢迎评论指出，也欢迎一起讨论。