如何理解浮动float、文档流、浮动的特点以及清除浮动的5种方法

 

什么是文档流

在标准文档流中，一个块级元素在水平方向会自动伸展，直到包含它的元素边界，而在垂直方向和兄弟元素依次排列，不能并排。

什么是浮动以及浮动的作用

浮动会让元素脱离普通文档流，在其漂浮在标准文档流之上。元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

作用：可以用来布局，或者用于图片，让周围的文本环绕图片。

 

特点：

只能左右浮动，不能上下浮动。

浮动会使元素半脱离文档流

如果父元素宽度不够，会自动换行。

父元素没有设置高度的时候，会出现塌陷

改变元素类型，会变成行内块元素，即可以设置宽高。

 

清除浮动

1、clear属性，值有left、right、both

2、为塌陷的父元素设置宽高

3、让父元素与子元素一起浮动（不推荐）

4、为父元素设置overflow:hidden;

5、clearfix：加在后面的元素上，这个元素不能是浮动元素，必须是块级元素

        如何使用clearfix: 给父元素加类clearfix

    .clearfix:after{

        content:"";//内容为空

        display:block;//必须是块级元素

        clear:both;

   }