属性值：left，right，none
浮动只能控制元素在水平方向上移动
浮动属性会使元素脱离文档流（正常的页面布局）初始页面不存在，会破坏正常的网页布局
（即，假如你的第一个<div>float:left,第二个<div>可以占据原来第一个<div>的位置）
浮动属性停止浮动的条件：
1.浮动元素碰到包含框（父级盒子）的时候会停止浮动（即碰到了父类盒子的边界）
2.浮动元素碰到前面一个含有浮动属性元素也会停止浮动（即若一个父类<div>,里面包含两个<div1>,<div2>,1和2同时float：left，<div1>会水平跟在<div2>后）
盒模型
content：内容区域
padding:内边距
margin:外边距
border:边界
Padding的使用
padding是设置父类与之类元素之间的位置关系。
padding通常是添加在父类元素上的（所有的子集元素都会变）
padding会撑大当前盒子的宽高大小，会影响其他布局。在父类中使用，应该减去相应的padding值，而在子类中使用，看情况考虑，是否要减去padding值
padding方向值
沿着顺时针旋转top，right，bottom，left
- padding 一个属性值 上下左右
- padding 两个属性值 上下 左右
- padding 三个属性值 上 左右 下
- padding 四个属性值 上右下左
- padding值能不能为负数? 不可以
margin
外边距margin设置同级元素之间的位置关系
margin不会改变当前盒子的宽高大小
margin方向值
top，right，bottom，left
margin一个值的时候，代表上下左右
margin两个值的时候，代表上下 左右
margin三个值的时候 ，代表 上 左右 下
margin四个值的时候 ，代表 上 右 下 坐
margin常见的BUG
当只有一个子元素时，给子元素加margin-top的时候，会错误解析到父级元素
解决方法：1.把margin换成padding
2.给自己元素加浮动（不影响原布局的情况下）
3.给父级添加边框属性
有两个同级元素上下排列，分别给两个元素设置margin-bottom，margin-top的时候，会取之间的最大值
原文：https://www.cnblogs.com/xsc1234/p/15146019.html