浮动/高度坍塌/清除浮动

文字环绕：float:left;

文字围着图片环绕：float:left ; shape-outside:margin-box;   shape-outside：ellipse(closest-side farthest-side at 50% 50%)

1.浮动元素会脱离文档流，

2.如果有定位元素，浮动元素的层级是没有定位元素的层级高

3.开启浮动之后，display属性都会变成block，宽度和高度都是由内容撑开的，默认情况;

   我们可以自己设置浮动元素的宽和高，同时可以设置margin,padding;

 4.浮动元素，普通元素在同一个包含块中，

   普通元素在前（1），浮动元素在后（2），浮动元素排布的时候，会避开普通元素

   普通元素在前（2），浮动元素在后（3），普通元素排布的时候，无视浮动元素，会进入浮动元素的下面（层级）。

行元素（文字）在排列的时候，会避开浮动元素。

浮动的初衷就是为了文字环绕。

float高度坍塌问题

1.父元素的高度自适应，2.子元素的float产生了一个坍塌效果

影响：1.父元素之后的兄弟，位置会发生变化，

           2.浮动元素在前，普通元素在后，浮动元素会对身后的普通元素产生影响，文字/内容会避开浮动盒子

绝对定位也会让父元素高度坍塌，因为绝对定位脱离文档流。

解决坍塌问题：清除浮动 clear:both

1.在父容器的最后位置，放置一个空的div，空div清除浮动影响

div div:last-child{

     clear:both

}

2.利用伪元素after来解决：

.outer::adter{

     content:“”；

     display:block;

     clear:both;

}