持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第8天，点击查看活动详情

一、标准文档流

• 在制作HTML网页时，需要遵守一个“流”的规则：从左至右、从上至下。这个“流”就是标准文档流
• 在标准文档流中会出现空白折叠现象
• 当标准文档流中的同一行的元素高矮不一时，这些元素会会底部对齐排列

二、浮动

（一）浮动的含义

• 浮动能够实现让多个元素排列在同一行，并且可以给这些元素设置宽度和和高度
  • 多个元素排列在同一行，即让元素具有行内元素的特性
  • 给元素设置宽度和高度，即让元素具有块级元素的特性
• 在标准文档流中的元素只有两种：块级元素和行内元素。如果想让一些元素既有块级元素的特点，也要有行内元素的特点，只能让元素脱离标准文档流
• 浮动可以让元素脱离标准文档流，即可以让多个元素排列在同一行，并可以设置宽高

（二）浮动属性float

• 浮动通过设置浮动属性float来实现
• float属性有两个值：
  • right:向右浮动
  • left:向左浮动

（三）浮动元素特点

• 浮动元素它脱离了标准文档流，所以浮动元素不在占用空间
• 浮动元素的层级比标准文档流里的元素层级高，所以浮动元素会将标准文档流中的元素压盖住
• 浮动元素会向左或向右进行浮动（移动）
• 浮动元素遇到父元素的边框就停止了浮动（父元素设置了高度）
• 浮动元素遇到另一个浮动元素会停止浮动
• 浮动元素浮动后，其父元素不会再将其包裹住
• 行内元素设置浮动后，变成块级元素

（四）清除浮动

• 只要有浮动，就必须要清除浮动。因为经过浮动的元素，它会影响到它之后元素的排列布局，并且浮动元素的父元素没有将浮动元素包裹。只要清除了浮动，就不会影响到之后元素的布局，浮动元素的父元素也会从视觉上将浮动元素包裹着

清除浮动方法

• 给浮动元素父元素设置一个固定的高度,该方法不常用
• 使用清除浮动样式属性clear。该属性一般用于最后一个浮动元素后面，即在最后一个浮动元素后面新建一个空白的div，该div只用于清除浮动
  • clear属性是专门用来清除浮动的，它有三个属性值：
    • clear:left:清除左浮动
    • clear:right:清除右浮动
    • clear:right:清除右浮动和左浮动
• 为父元素设置overflow:hidden属性样式清除浮动。overflow:hidden样式有两个含义：
  • 用于将元素中溢出的部分进行隐藏
  • 清除列表浮动