浮动及清除浮动

一、浮动

1、float： 用于浮动

left 元素向左浮动

right 元素向右浮动

non 默认值，元素不浮动

①div盒子不加浮动，作为块级元素占据整行，文字会自动换行。

②div盒子加了左浮动，float：left；呈现出一种文字环绕盒子的效果。

两种结果，见下图：

---

二、消除浮动

我们又感受到浮动的好处，但同样的使用了浮动以后一会造成一些影响，会造成父级高度塌陷。

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

下图的蓝色和粉色盒子都给了100px的宽高，外面包裹的盒子只给了一个宽300pxde 红色边框,在对蓝色和粉色的盒子加了左浮动以后，外面包裹的盒子塌陷了，没有了高。此时的蓝色和粉色盒子也已经脱离了文档流。

 

 那要如何才能解决浮动带来的影响呢？

1.清除浮动 clear

left    在左侧不允许浮动元素

right   在右侧不允许浮动元素

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

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

①在浮动元素的后面加一个空的div标签，为这个空的div设置。一个样式 clear：both；

---

②手动给父元素添加高度

---

③给父元素添加overflow：hidden

---

 ④给父元素添加伪类：after（☆☆☆ ☆☆）

元素::after{
            content: "";                           在clear类后面添加内容为空

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

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

        }

---

总结：

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

            1、浮动元素后面加空div

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

            2、设置父元素的高度

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

            3、父级添加overflow属性

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

            4、父级添加伪类after

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