浮动

1.概念：将元素从常规文档流中拿出来。

2.作用：实现文字环绕效果

             让原本上下堆叠的的块级元素实现左右排列

3.特点：向左向右float left/right 

             碰到父盒子的边界，停下来

             浮动元素脱离文档流，不占用位置

             浮动盒子左右排列，超出父盒子宽度，换行

             浮动图片后边未浮动盒子内文本会绕开图片，环绕排列，形成文字环绕效果

             浮动的元素无法撑开父元素盒子的高度，父元素需要设置高度或清除浮动

             浮动元素没有垂直margin的合并

4.清除浮动的方法:

            （1）为父元素设置高度

            （2）为父元素设置clear：both（冗余元素）

            （3）伪元素清除（在我们需要清除浮动时，只需要给父元素追加fix类即可，既方便又符合语义化。）

.fix::after{

     content:".";

     display:block;

     height:0;

     visibility:hidden;

      clear:both;

}

             还有一种简单写法：

.fix::after{

      content:"";

      display:table;

      clear:both;

}

注意：（1）display:none和visibility:hidden的区别

display:none:隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合

拢， 就当他从来不存在。

visibility:hidden:隐藏对应的元素，但是在文档布局中仍保留原来的空间。

（2）display:table;解决了一部分需要使用表格特性但又不需要表格语义的情况