本文共 683 字，大约阅读时间需要 2 分钟。

浮动布局：当元素浮动以后可以向左或向右移动，直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。元素浮动以后会脱离正常的文档流。

优点：

在图文混排的时候可以很好的使文字环绕在图片周围；

当元素浮动了起来之后，它有着块级元素的一些性质例如可以设置宽高等；

与inline-block有一些区别，横向排序的时候，float可以设置方向而inline-block方向是固定的；inline-block在使用时有时会有空白间隙的问题

缺点：

浮动元素一旦脱离了文档流，就无法撑起父元素，会造成父级元素高度塌陷。

清除浮动的方式：

1. 添加额外标签

   
        //添加额外标签并且添加clear属性    
    
    //也可以加一个br标签
   

2. 父级添加overflow属性，或者设置高度

   
    //auto 也可以    //将父元素的overflow设置为hidden    
    
   

3. 建立伪类选择器清除浮动（推荐）

//在css中添加:after伪元素.parent:after{    /* 设置添加子元素的内容是空 */      content: '';        /* 设置添加子元素为块级元素 */      display: block;      /* 设置添加的子元素的高度0 */      height: 0;      /* 设置添加子元素看不见 */      visibility: hidden;      /* 设置clear：both */      clear: both;}
   
    
    
   

转载地址：https://blog.csdn.net/yyychocolate/article/details/108034041 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！