css浮动

浮动

浮动的本质：

用来实现并排的效果

浮动使用的要点：要浮动，并排的盒子都实现浮动

父盒子要有足够的宽度，否则子盒子会掉下去

浮动的顺序贴靠特性

子盒子会按顺序进行贴靠，如果没有足够的空间，则会寻找前一个兄弟元素

浮动导致 父级盒子塌陷

            解决办法：

            1.父级盒子加高(不能自动撑开，高是固定的，不够灵活)

            2.父级盒子加overflow:hidden;(自动撑开，但会导致溢出的部分无法显示)

            3.加一个无内容的空盒子：clear:both;(必须无意义无宽高)

            4.父盒子加伪类属性::after{content:'';display:block;clear:both}{达到添加无意义空盒子效果且不受影响}

 .clearfix::after{
            content:'';
            display:block;
            clear:both;
        }
        .clear::after{
            content: '';
            display: block;
            clear: both;
        }
        .box{
            width: 50px;
            height: 50px;
            border: 1px solid yellow;
            float: left;
        }

溢出隐藏  overflow:hidden

浮动的元素一定能设置宽高

浮动的元素不再区分块级元素、行内元素、已经脱离了标准文档，一律能够设置宽度和高度，即使他 是a标签或span标签

使用浮动的注意事项

垂直显示的盒子，不要设置浮动、只有并排显示的盒子才要设置浮动 “大盒子带着小盒子跑”，一个大盒子中、又是一个小天地，内部可以继续使用浮动 div是免费的，不要节约盒子

清除浮动

清除浮动：浮动一定要封闭到一个盒子中，否则会对页面后续元素产生影响

方法一：父元素添加 overflow：hidden 、

方法二：给后面的父盒子设置 clear：both 属性 -- 会导致margin失效

方法三：使用::after 伪元素 给盒子添加最后一个子元素，并给 ::after设置 {content:"";clear： both;displa:block;}

1.脱离标准文档流影响：破坏了布局，导致布局错乱

 2.不脱离文本流

.div1{
            width: 50px;
            height: 101px;
            background-color: pink;
            float: left;
        }
        .div2{
            width: 500px;
            height: 102px;
            background-color: yellow;
        }
        .div3{
            width: 550;
            height: 100px;
            background-color: red;
            float: left;
        }
        .div4{
            width: 200px;
            height: 100px;
            background-color: green;
            float: left;
        }