浮动

页面布局的主要方式：

文档流：块级元素上下显示，行内块和行内元素左右显示
浮动：脱离正常的文档流，块级元素可以左右显示
定位：定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置

浮动

1.浮动的定义

元素的浮动是指设定浮动之后会相对于自身之前的位置

其基本语法格式如下：

选择器{float:属性值;}

属性值 描述

• left 元素向左浮动
• right 元素向右浮动
• none 元素不浮动（默认值）

2.浮动的特性

相当于机械绘图中的图层，底层为html图层，上一层为浮动所在图层，两个图层叠加，但不透明，浮动后底层html会自动重新排列元素
脱离标准流，不占位置，浮动只有左右浮动
目的：为了让多个块级元素可以在一行显示

3.清除浮动

由于浮动元素不占原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就要在该元素中清除浮动

准确来说，不是清除浮动而是清除之前和之后浮动元素对自身造成的影响

在css中，clear属性用于清除浮动，其语法格式为：

选择器{clear:属性值;}

属性值 描述

• left 不允许左侧有浮动元素（清除左侧浮动的影响）
• right 不允许右侧有浮动元素（清除右侧浮动的影响）
• both 同时清除左右两侧浮动的影响

4.浮动带来的影响及解决

• 问题：
  由于盒子模型默认父盒子不设宽高，如果盒子内的所有元素都浮动，会造成父盒子没有高度，打乱了后续的所有排列
• 解决：
  1.手动设置父盒子的宽高（不推荐，每次维护都需要设定相应的值）
  2 设置溢出隐藏
  原理：设置overflow为hidden相当于间接固定了盒子大小，因为只有固定大小才能对多余显示内容进行隐藏，在对父盒子进行固定时相对简单

overflow:hidden

  3.在父盒子内最后增加一个空的div，设定这个div清除浮动，以固定该位置来撑开父盒子的高度
  4.伪元素设定：设定一个伪元素，内容为空且为块级元素，清除前后浮动影响，撑起父盒子的高度

div ::after{
	display:block;
	content:'';
	clear:both;
}