学习前端的知识总结10

CSS浮动

网页布局方式有以下五种:

• 标准流（普通流、文档流)︰网页按照元素的书写顺序依次排列
• 浮动
• 定位
• Flexbox和Grid(自适应布局)

标准流是由块级元素和行内元素按照默认规定的方式来排列，块级就是占一行，行内元素一行放好多个元素。

1.浮动

浮动最典型的应用:可以让多个块级元素一行内排列显示。 
网页布局第一准则∶多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

代码：

选择器 {float：属性值；}

2.浮动特性

• 1．浮动元素会脱离标准流(脱标)
• 2．浮动的元素会一行内显示并且元素顶部对齐
• 3．浮动的元素会具有行内块元素的特性.

设置了浮动( float )的元素最重要特性︰
1．脱离标准普通流的控制(浮）移动到指定位置（动)，(俗称脱标)
2．浮动的盒子不再保留原先的位置

为了约束浮动元素位置,我们网页布局一般采取的策略是:
先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置.符合网页布局第一准侧.