前端面试 CSS— 浮动布局有哪些优点？有什么缺点？清除浮动有哪些方式？

Posted 2021-12-10 aiguangyuan

浮动布局简介：当元素浮动以后可以向左或向右移动，直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。元素浮动以后会脱离正常的文档流，所以文档的普通流中的框就变现的好像浮动元素不存在一样。

1. 浮动布局的优点

浮动布局优点就是在图文混排的时候可以很好的使文字环绕在图片周围。另外当元素浮动了起来之后，它有着块级元素的一些性质，例如可以设置宽高等。但它与inline-block还是有一些区别的，第一个就是横向排序的时候，float可以设置方向而inline-block方向是固定的；第二就是inline-block在使用时有时会有空白间隙的问题。

2. 浮动布局的缺点

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

3. 清除浮动的方法

1. 添加额外的子标签配合 clear:both 清除浮动

<style>
    .child{
        width:100px;
        height:100px;
        background:red;
        float: left;
    }
</style>

<div class="parent">    
    <div class="child"></div>
    <!-- 添加一个额外的标签 -->
    <div style="clear:both"></div>  
</div>

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

<style>
    .parent{
        overflow: hidden;
        /* 或者设置高度 */
        /* height:100px; */
    }
    .child{
        width:100px;
        height:100px;
        background:red;
        float: left;
    }
</style>

<div class="parent">    
    <div class="child"></div> 
</div>

3. 添加伪类清除浮动（推荐 ）

<style>
    .parent:after{    
        /* 设置添加子元素的内容是空 */      
        content: '';        
        /* 设置添加子元素为块级元素 */      
        display: block;      
        /* 设置添加的子元素的高度0 */      
        height: 0;      
        /* 设置添加子元素看不见 */      
        visibility: hidden;      
        /* 设置clear：both */      
        clear: both;
    }
    .child{
        width:100px;
        height:100px;
        background:red;
        float: left;
    }
</style>

<div class="parent">    
    <div class="child"></div> 
</div>