开发者学堂课程【CSS 快速掌握：浮动】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/611/detail/9188
浮动
内容介绍
一、浮动简介
二、范例：代码展示
一、浮动简介
需求:
能够实现让多个元素排在同一行，并且给这些元素设置宽度与高度!让多个元素排在同一行:行内元素的特性
给这些元素设置宽高:块级元素的特性
在标准文档流中的元素只有两种:块级元素和行内元素。如果想让一些元素既要有块级
元素的特点也要有行内元素的特点，只能让这些元素脱离标准文档流。
浮动可以让元素脱离标准文档流就可以实现让多个元素排在同一行并且可以设置宽高!
浮动它是通过一个浮动属性来实现
float:这个属性有两个值left(向左浮动)向左移动、right(向右浮动)
向右移动浮动元素的特性:
l 浮动元素它脱离标准文档流它不再占用空间了
l 我们可以把浮动元素理解为“漂”
l 浮动元素它的层级要比标准文档流里面的元素层级要高，它会将标准文档流中的元素给压盖住
l 浮动元素它遇到了父元素的边框然后就停止了浮动
l 浮动元素它还会遇到上一个浮动元素后就停止了浮动
l 浮动元素浮动以后 其父元素不会再包裹着浮动元素
l 我们将行内元素进行浮动以后 那么这个行内元素它会变成块级元素
二、范例：代码展示
<!DOCTYPE html><html lang=“en”><head>
<meta charset="UTF-8"><title>浮动</title>
<style type="text/css">
.box{
width: 600px;
border: 1px solid #000;
margin-left : auto;
margin-right: auto;
} .div1{
.div 1{ width: 100px;
height: 100px;
background-coLor:#f00;
}
.div 2{ width: 100px;
height: 100px;
background-color: #Of0;
} </style>
