一、浮动属性

例子：

文字环绕：
文字环绕：div1浮动，div2跑到div1下面，但是div2中的文字会被挤出来，沿着div1边缘显示，达到文字环绕效果

二、清浮动

前面元素浮动导致后面一个元素自动补位，由于设置了浮动，导致container元素高度为0，需要解决高度塌陷问题

1、写固定高度，设置container父盒子高度（不推荐，子元素增多时换行出现问题）
2、清浮动，在下面元素box2上设置清楚前面元素的浮动 （不推荐）clear:none/left/right/both;
3、当前浮动元素中增加空盒子清浮动 clear:both;
不利于代码可读性，且降低了浏览器的性能
4、overflow:hidden 利用bfc块级作用域，让浮动元素计算高度

三、边距

padding 内边距
导致盒子设置的位置比原来自己设置的更宽更高（背景色蔓延），盒子整体宽度变成width+左右两内边距，高同理

padding ： 10px 20px 30px 40px;
1个值：4个方向一样
2个值：上下、左右
3个值：上、左右、下
4个值：上、右、下、左
1
2
3
4
5

单一方向内边距设置方法：

padding-方向：top bottom left right
1

四、边框

全方向设置，属性：宽度 加粗 红色

border：10px sold red;
1

样式：sold(实线)、double(双线)、dashed(虚线)、dotted(点状线)

背景也蔓延到了边框，盒子变大了

单一方向边框设置方法：

order-方向：top bottom left right
用法：
border-top:10px sold red;
1
2
3

属性拆分：
border-width
border-color
border-style
每个属性都可以设置不同方向不同的样式，例如：

border-width:10px; 四个边框宽10px
border-width:10px,20px; 上下宽10px，左右宽20px
border-width:10px,20px,30px; 上10，左右20，下30
border-width:10px,20px,30px,40px; 上10，右20，下30，左40
1
2
3
4

五、外边距

margin
1、margin-方向 ：top bottom left right
2、背景色不蔓延
3、外边距可以为负值
4、横向居中margin:0 auto

兄弟边距问题：水平和垂直方向的外边距问题
1、垂直方向，外边距取最大值。div1外边距100px，div2外边距50px，最终展示出来div1与div2之间距离是100px
2、水平方向，外边距会进行合并，div1外边距100px，div2外边距50px，最终展示出来div1与div2之间距离是150px

父子边距问题：子盒子设置外边距会作用到父盒子上，并不会让子盒子和父盒子之间产生边距，解决办法：
1、父盒子设置padding内边距，并缩小父盒子width或height对应值(内边距会使盒子变大)，注意高度计算
父：padding-top:10px;
并将width、height相应减少
子：不设置
2、给父盒子设置边框，有了边框子盒子设置外边距就会生效：
父：border:1px solid transparent; #transparent表示透明
并将width、height相应减少
子：margin-top：100px；#正常设置外边距
3、加浮动
给父盒子加浮动，子盒子设置外边距就会生效
给子盒子加浮动并设置外边距也会生效
保证不在一个空间中就会生效
4、父盒子加overflow:hidden 不干扰其他元素，子元素正常设置外边距