从零开始学前端 - 6. CSS浮动float详解及清除浮动的方法

最新推荐文章于 2024-07-11 18:23:29 发布

她不美却常驻我心

最新推荐文章于 2024-07-11 18:23:29 发布

阅读量743

点赞数

分类专栏：从零开始学前端 CSS 文章标签： html css css3 es6 node.js

本文链接：https://blog.csdn.net/qq_39506551/article/details/106217672

版权

从零开始学前端同时被 2 个专栏收录

45 篇文章 1 订阅

订阅专栏

CSS

5 篇文章 0 订阅

订阅专栏

作者: 她不美却常驻我心
博客地址: https://blog.csdn.net/qq_39506551
微信公众号：老王的前端分享
每篇文章纯属个人经验观点，如有错误疏漏欢迎指正。转载请附带作者信息及出处。

一、文档流

浮动可以说是 CSS 中的重点属性了，CSS的初学者往往会在浮动上遇到第一个难题，接下来我们来详细的讲解一下浮动属性。

首先我们知道 div 是块级元素，无论它的宽度是多少，都会在页面中独占一行，而浏览器是自上而下对 html 进行解析的，所以这些 div 的排列顺序取决于 html 代码中的书写顺序。这种正常的排列方式，我们称之为文档流。
例：

<div class="box" style="border: 1px solid #000;">
    <div style="width: 30%;height: 100px;background-color: grey;">div1</div>
    <div style="width: 60%;height: 120px;background-color:yellow;">div2</div>
    <div style="width: 40%;height: 140px;background-color:red;">div3</div>
    <div style="width: 60%;height: 160px;background-color: blue;">div4</div>
</div>

正常情况如图所示，
在这里插入图片描述

二、左浮动

浮动可以理解为让某个 div 元素脱离文档流，漂浮在文档流之上，和文档流中的元素不在处于一个层次。
我们对 div1 添加浮动属性，使它脱离开标准的文档流之后，效果如下：
浮动div1
我们发现 div1 的位置没有改变，但 div2 向上移动了。实际上 div2 占据了未浮动时的 div1 的位置，浮动之后的 div1 位于 div2 的上方，遮盖住了一部分 div2。包含所有 div 的边框也缩小了，不在包含 div1 ，box 的边框也缩小了一个 div1 的高度。
也就是说，浮动过的元素会处于文档流元素的上方，它的父元素也不在计算它的高度。
但我们发现浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置，这个就是浮动元素的文字环绕现象。

当我们对 div2 也进行浮动之后，效果如下：
浮动div2
我们发现 div1 和 div2 处于同一排的位置，而处于文档流中的 div3，div4，div5 向上进行了移动。这说明了浮动流的元素会进行水平排版，紧贴在前一个浮动元素的后面。

当我们对 div3 也进行浮动之后，效果如下：
浮动div4
我们发现 div3 并没有跑到 div2 的后方，这是因为 div1 和 div2 占据了父元素的 90% 的宽度，而 div3 的宽度大于 10% ，所以只能换到下一行，也就是说，如果一行放不下所有的浮动元素，那么后面的元素会被挤到下一行，浮动元素默认不能超过父级元素的边界。

当我们取消对 div2 的浮动之后，效果如下：
取消div2浮动这个时候 div1 和 div3 进行了浮动，div2和div4没有浮动。我们发现 div3 的上方并没有与同为浮动元素 div1 底部对齐，而是与未浮动的 div4 一样对齐的是未浮动的 div2 元素底部。这里由于篇幅原因，我们说一下其他的实验和结论：

将 div4 也进行浮动： div3 与 div4 处于同一行，顶部都对齐 div2 的底部；
将 div4 的宽度调整为 70%：div4 换行，顶部对齐 div3的底部；
将 div4 的宽度还原，新增 div5 并浮动：div4 换行，div5 顶部对齐 div4 的底部；

也就是说，浮动元素顶部对齐的并不一定也是浮动元素，而是距离它最近的一行元素底部，浮动元素的顶边不得高于上一个盒子的顶边；。

三、右浮动

以上都是基于左浮动进行的讲解，接下来我们重新开始，换成右浮动。
当我们对 div1 进行右浮动之后，效果如下：
右浮动div1
我们发现发现它与左浮动的区别只不过是它跑到了右边，没有遮挡 div2 。但 div2 是块级元素，理应独自占据一行，所以实际上它还是占据的是 div2 的位置。

当我们对 div2 也添加右浮动之后,效果如下：
右浮动div1 div2
我们发现发现 div1 位于 div2 的右方，按照浏览器从上到下，从左到右的顺序来说，这种现象乍一看上去极其矛盾。但实际上正是因为这个解析规则，才会出现这种现象：
浏览器先解析到 div1 ，发现它具有右浮动属性之后，让他靠右排列，然后发现 div2 也具有右浮动属性，所有也让他靠右排列。根据我们之前说过的浮动元素会紧贴在前一个浮动元素后面的规则，div2 才会出现在 div1 的左边，也就是说：对于右浮动元素而言，他们是从右向左的显示顺序，而不是常规的从左到右顺序。这也是左浮动与右浮动之间的区别。

四、高度塌陷清除浮动

按照之前说的，元素的高度如果未设置，会由子元素撑起父元素的高度，当我们对所有的 div 元素都添加了浮动之后，我们发现 box 的高度变为了0，只有两条边框在一起，并且 div1 和 div2 遮盖住了一部分左，右，下三条边框。
这种情况被我们成为高度塌陷，因为这种现象的原因是浮动引起的，所以解决这种现象的方法我们成为清除浮动。
在这里插入图片描述
清除浮动的几种办法：

在父元素中，追加空子元素，并设置属性为clear:both ；
clear:both属性的作用就是为了清除浮动。这个方法的缺点就在于需要手动添加一个空的元素。
例：

<div style="border: 1px solid #000;">
	<div style="width: 30%;height: 100px;background-color: grey;float: left;">div1</div>
	<div style="width: 60%;height: 120px;background-color:yellow;">div2</div>
	<div style="width: 40%;height: 140px;background-color:red;float: left;">div3</div>
	<div style="width: 60%;height: 160px;background-color: blue;float: left;">div4</div>
	<div style="clear:both"></div>
</div>

使用伪类选择器:after，在浮动元素的父级添加如下样式；
这是我们最常用的清除浮动的办法，原理和方法1 一致。兼容性问题我们一般通过 JS 来解决。
:after用于在选择的元素内部之后插入内容；
content:""; 表示生成内容为空；
例：

<head>
	<style>
		.clearfloat:after{content:""; display: block; clear:both;}
	</style>
</head>
<body>
    <div style="border: 1px solid #000;" class="clearfloat">
        <div style="width: 30%;height: 100px;background-color: grey;float: left;">div1</div>
        <div style="width: 60%;height: 120px;background-color:yellow;">div2</div>
        <div style="width: 40%;height: 140px;background-color:red;float: left;">div3</div>
        <div style="width: 60%;height: 160px;background-color: blue;float: left;">div4</div>
    </div>
</body>

将父元素也浮动
这虽然解决了当前元素的问题，但属于治标不治本，对文档布局和后续元素还是会有影响。最后会造成页面中所有的元素都是浮动元素，所以我们一般不使用这个方法。
使用 overflow：hidden
overflow：hidden的意思是超出部分隐藏，但如果有内容要溢出元素显示(弹出菜单)，也会被一同隐藏。
父元素设置 display:table
display:table的含义是将元素的标准盒模型转化为表格模型，直接改变了盒模型属性，会造成其他问题。

五、总结

给一个元素添加浮动属性后，该元素会脱离文档流；
浮动流元素处于标准文档流元素的上方；
如果浮动元素的父级不是浮动元素，父级不会主动计算浮动元素的高度；
若同行内剩余空间无法放下浮动的元素，则该元素向下移动，直到具备足够的空间，然后再向左或向右移动；
浮动元素的顶边对齐的不一定也是浮动元素，不得高于上一个元素的顶边；
左浮动的排列顺序是从左到右，右浮动的排列顺序是从右到左；
清除浮动的常用方法是 .clearfloat:after{content:""; display: block; clear:both;}；

种一棵树，最好的时间是十年前，其次是现在。人的一生，总的来时就是不断学习的一生。
蚕吐丝，蜂酿蜜。人不学，不如物。与其纠结学不学，学了有没有用，不如学了再说。
等你学会了之后，你才拥有资格说“啊，这个东西学了没用。”

每篇文章纯属个人经验观点，如有错误疏漏欢迎指正。转载请附带作者信息及出处。您的评论和关注是我更新的动力!
老王的前端分享
请大家关注我的微信公众号，我会定期更新前端的相关技术文章，欢迎大家前来讨论学习。
都看到这里了，三连一下呗~~~。点个收藏，少个 Bug 。

她不美却常驻我心

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
从零开始学前端 - 6. CSS浮动float详解及清除浮动的方法

作者: 她不美却常驻我心博客地址: https://blog.csdn.net/qq_39506551微信公众号：老王的前端分享每篇文章纯属个人经验观点，如有错误疏漏欢迎指正。转载请附带作者信息及出处。CSS 难点之一浮动 float属性CSS 浮动属性详解，高度塌陷的原因，清除浮动的方法。浮动详细实例
复制链接

扫一扫