用户投稿Float 浮动
Float 在设计之初是用来呈现文绕图的效果，可以将元素指定为靠左或靠右浮动，在 CSS 中，所有的元素都可以加入 float 属性。
範例：
未使用 float 时，正常的图片 + 文字效果
在图片元素中加 float: left 将图片向左浮动，出现文绕图效果
浮动元素的特性
拥有 float 属性的元素被称为浮动元素，而成为浮动元素后也会改变元素本身的特性，下面就让我们来看看浮动元素有哪些与一般元素不同的地方吧！
元素浮动后会像浮在空中般脱离原本的元素排列，后面的元素会跑到浮动元素下方造成排版问题当我们把绿色 div 的高度拉高，会发现其实绿色元素有一部分是被红色浮动元素盖住的，也就是说在元素浮动后不会佔据原本元素排列的空间，进而导致后方的元素往前移至浮动元素下方
浮动后的元素脱离原本的文档排列 (浮起来)，当父元素中只有浮动元素时，浮动元素无法撑开父元素的高度以一个蓝色父元素 div 包裹三个橘色子 div 的结构为例，未浮动时子元素佔据一行，排列如下：
当我们将三个子元素都加入
float: left 时，子元素失去原有特性变为同一行，且无法撑开父元素的高度
浮动后的元素可以设定宽度和高度：inline 元素在浮动后可以指定宽高浮动后不会出现之前提过的 Margin 合併、塌陷问题浮动元素虽然脱离原本的元素排列，但仍受父元素宽度的限制，若超过则自动跑到下一行常见的浮动排版
虽然 float 在设计出是为了文绕图效果，但在实际开发中也常被用来排版，下面来看几个例子：
需要将区块元素放在同一行时，将区块元素加入 float 属性就可以使他们在同一行靠左或靠右排列
.item { width: 200px; height: 200px; background-color: lightgray; margin: 10px; float: left; }
文绕图内容，常用于文章内容和图片排版
左右版面设计
在开发中我们可能会遇到下图这样的页面，除了上方 header 外内容的部分可能分为左侧栏和主要内容，我们需要将下面两个区块排列在一行，这时候就可以加入 float: left 达到目的。
清除浮动
前面我们说到当元素成为浮动元素后会引发一些排版的问题，例如无法撑开父元素，或是会影响到后面的非浮动元素等。而清除浮动 (clear float) 可以 清除某元素前面的浮动，也就是说若我们在浮动元素后面加一个负责清除浮动状态的元素，即可以解决因浮动而产生的问题，那实际上要如何操作呢？
语法：
clear: left; /* 只清除前面为 float: left 的浮动 */clear: right; /* 只清除前面为 float: right 的浮动 */clear: both; /* 清除前面所有浮动 */清除浮动的方法：
1. 在所有浮动元素后新增一个空白的区块元素，并加入 clear float 属性
.father { background-color: lightblue;; } .item { background-color: lightgray; width: 200px; height: 200px; margin: 10px; float: left; } .clear { clear: both; }<body> <div class="father"> <div class="item"></div> <!-- 浮动元素 --> <div class="item"></div> <!-- 浮动元素 --> <div class="item"></div> <!-- 浮动元素 --> <div class="clear"></div> <!-- 加入空的元素并设定 clear: both 清除浮动 --> </div> </body>2. 在父元素中新增一个 after 伪元素并加入 clear float 属性
若父元素中浮动元素后没有其他子元素，则可以利用伪元素来加入清除浮动，其实原理是一样的，只是不用另外在写一个空的元素。
.father { background-color: lightblue;; } .item { background-color: lightgray; width: 200px; height: 200px; margin: 10px; float: left; } .father::after { content: ''; display: block; /* 一定要将 display 改为 block，否则无法清除 */ clear: both; }<body> <div class="father"> <div class="item"></div> <!-- 浮动元素 --> <div class="item"></div> <!-- 浮动元素 --> <div class="item"></div> <!-- 浮动元素 --> </div> </body>Tips:
同个父元素内的子元素最好都是浮动元素，或非浮动元素若出现因为 float 而产生的排版问题可先检查是否有确实清除浮动使用伪元素清除浮动时，若浮动元素后、::after 前还有其他正常元素，则清除浮动无法达到应有的效果，必须使用方法一 clear float上一篇：[快速入门前端 27] Overflow 和 Visibility
下一篇：[快速入门前端 29] Position 定位：绝对定位、相对定位、固定定位、黏性定位
系列文章列表：[快速入门前端] 系列文章索引列表
微信扫一扫打赏
支付宝扫一扫打赏
