关于CSS的浮动笔记

内容来是作者学习尚硅谷浮动的相关视频所做笔记，希望能帮助大家，欢迎补充。

前言

在某一天，小范忘记了flex布局的使用方法，却想三个盒子并排在同一行，于是他找到了浮动。

浮动

可以使浮动的框向左或向右移动，直到它的边缘碰到包含框或者另一个浮动框的边框为止。

浮动的作用：

可以是一个元素向其父元素的左侧或者右侧移动

浮动的属性：

float：

        可选值：none，默认值，元素不移动

                       left，元素向左移动

                       right，元素向右移动

浮动的主要特点

1.浮动的元素会完全脱离文档流，导致该元素下面的元素会自动向上排列。

2.并且脱离文档流的块元素，会具有行内块元素的性质。行内元素脱离文档流以后也会具有行内块元素的性质

 以下是同样打开开发者工具对盒模型选取的对比：

浮动前：占据一整行