CSS浮动 浮动

标准流

css定位有三种:标准流 、浮动和定位 我们默认使用的就是标准流

浮动

什么是浮动

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制,移动到其父元素指定位置的过程。

在css中通过float来定义浮动

选择器{float:value}

属性值 描述
left 元素向左浮动
right 元素向右浮动
none 元素不浮动(默认值)

浮动的详细特性

浮动脱离标准流控制,不占位置,会影响标准流。浮动只有左右浮动。 浮动首先创建包含块的概念(包裹)。就是说, 浮动的元素总是找理它最近的父级元素对齐。但是不会超出内边距的范围。

CSS浮动
浮动

浮动的元素排列位置,跟上一个元素(块级)有关系。 如果上一个元素有**浮动**,则A元素顶部会和上一个元素的**顶部对齐** 如果上一个元素是**标准流**,则A元素的顶部会和上一个元素的**底部对齐** 

CSS浮动
浮动

CSS浮动
浮动

注意:

由2可以推断出,一个父盒子里面的子盒子,如果其中一个子级有浮动的,则其他子级都需要浮动。这样才能一行对齐显示。