CSS浮动
网页布局方式有以下五种:
- 标准流（普通流、文档流)︰网页按照元素的书写顺序依次排列
- 浮动
- 定位
Flexbox和Grid(自适应布局)
标准流是由块级元素和行内元素按照默认规定的方式来排列，块级就是占一行，行内元素一行放好多个元素。
1.浮动
浮动最典型的应用:可以让多个块级元素一行内排列显示。
网页布局第一准则∶多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
代码：
选择器 {float：属性值；}
2.浮动特性
- 1．浮动元素会脱离标准流(脱标)
- 2．浮动的元素会一行内显示并且元素顶部对齐
- 3．浮动的元素会具有行内块元素的特性.
设置了浮动( float )的元素最重要特性︰
1．脱离标准普通流的控制(浮）移动到指定位置（动)，(俗称脱标)
2．浮动的盒子不再保留原先的位置
为了约束浮动元素位置,我们网页布局一般采取的策略是:
先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置.符合网页布局第一准侧.