html-盒子的浮动

今天开始我们的浮动部分之前，先对前面盒子部分做一些补充。

对于盒子的大小默认情况下：盒子可见宽的大小由内容区，内边距，边框共同决定的

            box-sizing  用来设置盒子尺寸的计算方式 width/height 指的是谁

                可选值：

                    content-box 内容区 默认值

                    border-box  宽度和高度用来设置整个盒子可见框的大小，包括边框，padding，以及内容。

盒子周围阴影的设置。

 box-shadow

             用来设置元素的阴影效果，不会影响到页面布局

                第一个值：水平偏移量  正->左  负->右

                第二个值：垂直偏移量  正->下  负->上

                第三个值：模糊半径

                第四个值：颜色    默认是黑色

border-radius 可以用来设置圆角 

             borde-top-right-radius

             border-top-left-radius

             border-bottom-left-radius

             border-bottom-right-radius

             border-radius: 50%;

我们都知道块元素在文档流中，会独占一行。那么如何让块元素脱离文档流呢？今天我们就开始介绍其中一种方法。浮动（float）

float可以设置元素的浮动。浮动方向可以选值有 none  right  left

float none  不浮动

float right  右浮动

float left  左浮动

他它是一种水平布局方法（另外一种方式是定位后面会说到）

设置浮动后的特点：

第一种：是脱离文档流，不在独占一行。原有的位置会空出后面的元素会“上浮”。

第二种：浮动的元素浮动范围不会脱离它的父元素的范围。

第三种：元素浮动以后，元素会尽量向页面的左上或页面右上漂浮。

第四种：浮动元素默认不会从父元素中移出。

第五种：浮动的元素不会超过他上边的兄弟元素，最多最多一边齐。

第六种：如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移。

总结：浮动可以将一些元素水平分布，以满足一些水平的布局要求。