一、水平布局：

    margin-left+ border-left + padding-left+ width +padding-right+ border-right +margin-right

    水平方向这7个值相加必须等于其父元素内容的宽度

     30+5+20+100+20+5+？ = 600   如果出现不等于的情况，浏览器就会自己调整这7个值，从而让等式成立，这个过程叫过度约束

如何调整的：

1、七个值当中，如果没有auto，那么就调整margin-right

2、有三个值可以设置auto    margin-left width  margin-right

       1个auto

      margin-left  margin-right  width

如果有一个auto，其他的为固定值，那么浏览器就会调整这个auto

      2个auto

      margin-left width      调整width

      width  margin-right     调整width

      margin-left  margin-right    浏览器各调整一半，从而会让盒子水平居中

3个auto

     margin-left width  margin-right   调整width

总结：

     只要width为auto，浏览器肯定会调整widthwidth>right>left

二、垂直布局：

   top+margin-top+borfer-top+padding-top+width+padding-bottom+border-bottom+margin-bottom+bottom=包含块的内容块的高度

   调整与水平布局一样

<style>
        .div1 {
            width: 300px;
            height: 300px;
            background-color: coral;
            position: relative;
        }
        .son1 {
            width: 50px;
            height: 50px;
            background-color: cornflowerblue;
            position: absolute;
            left: 0;
            right: 0;
            /* margin: 0 auto; */
            top: 0;
            bottom: 0;
            margin: auto;
        }
    </style>

三、浮动：

    可选值

    float: 可选值

：none 默认值，没有浮动

    left 向左浮动

     right 向右浮动

           浮动的特点：1.元素会脱离标准文档流，下面元素的上移

       实现文字环绕图片显示，所以浮动元素会覆盖标准流的元素，但是不会覆盖元素文字内容

          2.浮动元素不会超过父元素

          3.行元素设置浮动会改变元素性质，变成块元素

 四、清除浮动:

       clear :

   可选值：none 默认，不清楚浮动

          left 清除左浮动

          right 清除右浮动

          both 清除二边对它影响最大的一侧浮动  -->

   高度塌陷：

       是什么？

       解决1.设置父元素高度，但是不能自适应子元素的一个高不推荐。

       解决2.清除浮动,是清除影响元素的二侧浮动影响

       解决3：开启父元素的BFC（块级化环境），css影藏属性，

            a.父元素浮动,本身脱离文档流，影响后面的布局，，不设置宽高，父元素宽高默认由内容撑开，不推荐

            b.父元素设置为行内块元素，不设置宽高，父元素宽高默认由内容撑开，不推荐

            c.父元素设置overflow非visible,推荐设置hidden/auto

            d.父元素定位（暂没有学到）

       解决4.父元素最后添加一个非浮动元素，清除该元素二边浮动，

            a.在html中直接添加元素，再清除浮动，但这样会打乱html的结构，不推荐

            b.通过伪类添加元素，设置元素属性和清除浮动，不会打乱html的结构，推荐使用和解决外边距重合问题结合