【CSS】：正常布局流（normal flow）、有趣的浮动（float）
1、前言
大家好，我是翼同学。今天笔记的内容是：
正常布局流 normal flow、有趣的浮动 float
2、概述
🌱normal flow
正常布局流 (normal flow)也称标准流或者文档流，指的是在不对页面进行任何布局控制时，浏览器默认的 HTML 布局方式。
举个例子，块级元素会独占一行，比如<div>、<h1>、<p>等，会从上向下顺序排列。行内元素则会按照从左到右顺序排列，碰到父元素边缘就会自动换行。像这种按照源码中先后出现的顺序不同而显示元素的方式就是正常布局流，也是最基本的布局方式。
🌳常见布局
当然，除了最基本的布局方式，我们也可以创建新的布局。
当我们使用 CSS 创建一个布局时，就意味着脱离正常布局流（normal flow），此时新的布局会覆盖掉默认的布局方式。
常见的传统布局方式有一下三种：
float
创建浮动框，将其移动到一边，直到左边缘或右边缘接触或包含块或者另一个浮动框的边缘
position
精确设置盒子的位置（正常布局流中，position 属性的默认值为 static）
display
更改元素默认的显示方式
3、浮动
💡介绍
浮动，是网页上创建多列布局的常用工具之一，也是传统的布局方式。引入 float 属性后可以实现元素包括横向排列等简单的布局方式。
将一个元素设置为浮动 float 后，会改变该元素本身和在正常布局流中跟随它的其他元素的行为。
float 属性值如下所示：
none：默认值，不浮动
left：将元素浮动到左侧
right：将元素浮动到右侧
inherit：继承父元素的浮动属性
浮动元素的基本特征：
当我们将元素设置为浮动时，该元素会从正常布局流中移除（也就是脱离标准流），并且其他元素内容会围绕在该浮动元素的周围。浮动元素具有行内块（
inline-block）元素的特性。简单的说，浮动元素会紧挨在一起（无缝隙），于一行内显示，当父级容器装不下时，多出的浮动元素会另起一行对齐显示。
浮动的使用：
我们可以将浮动和正常布局流的父盒子搭配使用。也就是先用标准流的父元素排列上下位置，再对内部子元素设置浮动属性，使其左右排列位置。需要注意，浮动的盒子只会影响到浮动盒子后面的正常布局流，而不会影响到前面的正常布局流。
✨示意
举个浮动的例子：
效果如下：
这是正常布局流的效果。此时对盒子添加浮动属性：
效果如下：
在上述例子中，我们为<div>元素添加浮动属性，因此该浮动元素会脱离正常的文档布局流，并且紧贴在父元素（<body>）的左边，之前在正常布局中位于浮动元素之下的内容，此时会围绕着浮动元素，也就是填满其右侧的空间。这就是浮动元素的特点。
有趣的是，在上述例子中，我们在浮动元素上添加 margin-right 属性，可以用于将文字推开。但是，无法在段落<p>元素上应用 margin-left 属性将浮动元素推走。这是因为浮动的元素脱离了正常文档流，而紧跟其后的元素则排列在后方。此时如果给段落标签添加背景颜色，可以明显看出：由于浮动元素从正常文档流移出，段落的盒子仍然保持全部宽度。
因此总结的说：
元素添加浮动属性后，会被移出正常文档流，并且其他元素会显示在浮动元素的下方。
4、写在最后
好了，今天的笔记就记到这里。
版权声明: 本文为 InfoQ 作者【翼同学】的原创文章。
原文链接:【http://xie.infoq.cn/article/1ab2a231dc6b80154aa5c844b】。文章转载请联系作者。
知行合一 2022.08.02 加入
@珠海科技学院
评论