CSS3浮动

浮动

float：          用于浮动

            left           元素向左浮动

           right         元素向右浮动

            none      默认值，元素不浮动

发现img的并不在div里面，为什么？

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

2. 加了浮动的img 无法把div撑住，会造成div的高度塌陷

解决父级边框塌陷的方法：

1.清除浮动 clear

left    在左侧不允许浮动元素

right   在右侧不允许浮动元素

both    在左、右两侧不允许浮动元素(一般就用这个)

none    默认值。允许浮动元素出现在两侧

在浮动元素的后面      加上一个空div 设置clear:both   可以不是div，但是必须是块元素

2.给父元素设置高度 height （不推荐）

 3.给父元素增加overflow：hidden

4.父级添加伪类after（推荐）

 元素::after{

            content: "";                           在clear类后面添加内容为空

            display: block;                     把添加的内容转化为块元素

            clear: both;                          清除这个元素两边的浮动

        }

这三个都要写！！！！

小结

清除浮动，防止父级边框塌陷的四种方法

            1、浮动元素后面加空div

                简单，空div会造成HTML代码冗余

            2、设置父元素的高度

                简单，元素固定高会降低扩展性

            3、父级添加overflow属性

               简单，下拉列表框的场景不能用

            4、父级添加伪类after

            写法比上面稍微复杂一点，但是没有副作用，推荐使用

延伸overflow

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

hidden  内容会被修剪，并且其余内容是不可见的

scroll  内容会被修剪，但是浏览器会显示滚动条以便查看其余内容

auto    如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容