CSS浮动及去除浮动

1.CSS浮动

语法：float：left；

float：right

☆加了浮动的img就脱离了文档流，导致div保不住img，img会把div盖住 

加了浮动的img无法吧div撑住，会造成div塌陷

2CSS如何去除浮动

2.1清除浮动的第一个方法

在浮动元素的后面加一个空的div,设置clear:both

2.2清除浮动的第二个方法

给父元素加height（一般不建议）

2.3清除浮动的第三个方法

给父元素加个overflow：hidden

overflow: visible；

默认值，内容不会被修剪，会呈现在盒子外面

overflow: hidden;

内容会被修剪，多余部分被隐藏 

overflow: scroll;

内容会被修剪，但是浏览器会显示滚动条以便查看其余内容 🔺只会在需要的地方添加滚动条

overflow: auto;

如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容 🔺只会在需要的地方添加滚动条

2.4清除浮动的第四种方式，父级添加伪类after

.clear：after{

         content：""；在clear类后面添加文字为空

        display：block；把添加的内容转化为块元素

        clear：both；清除这个元素两边的浮动

}

clear：

属性值	说明
left	在左侧不允许浮动元素
right	在左侧不允许浮动元素
both	在左、右两侧不允许浮动元素
none	默认值。允许浮动元素出现在两侧