关于浮动的清除

冷不防 2022-01-26 05:27 185阅读 0赞

# 为什么要清除浮动 #

举例来看：

#father{
            border: 1px solid black;
            width: 700px;
        }
        #child1{
            /* float: left; */
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
        #child2{
            /* float: left; */
            width: 400px;
            height: 400px;
            background-color: rgb(228, 23, 200);
        }

如果不对子盒子设置浮动，不设置父盒子高度，那么父盒子可以正常被撑开；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjQzMzE2_size_16_color_FFFFFF_t_70][]

但是如果将子盒子设置为浮动，就会出现子盒子正常浮动，父盒子变成一条线的问题。（情况如下）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjQzMzE2_size_16_color_FFFFFF_t_70 1][]

# 如何取消浮动 #

## 方案一：对父元素使用before和after伪类清除浮动 ##

具体写法如下：

#father:after, #father:before{
            content: "";
            display: table;
        }
        #father:after{
            clear: both;
        }
        #father{
            *zoom: 1;
        }

优缺点：

优点：代码简洁，兼容大部分浏览器

缺点：用zoom:1触发hasLayout。（关于什么是hasLayout，请参见一下博文[https://blog.csdn.net/sunny327/article/details/38071503][https_blog.csdn.net_sunny327_article_details_38071503]）

## 方案二：在最后一个子元素后面添加一个空白标签，并对空白标签使用clear:both; ##

写法如下：

#clear {
                clear: both;
            }

优缺点：

优点：写法简单，通俗易懂。

缺点：添加无用标签，可读性下降。

## 方案三：对父元素使用overflow：hidden ##

写法如下：

#father {
                border: 1px solid black;
                width: 700px;
                overflow: hidden;
            }

优缺点：

优点：写法简单，方便简洁。

缺点：溢出元素会被隐藏，会造成显示内容缺失。

## 方案四：对父元素使用：after伪类 ##

写法如下：

#father {
                border: 1px solid black;
                width: 700px;
                zoom: 1
            }
    
            #father:after {
                display: block;
                clear: both;
                content: "";
                visibility: hidden;
                height: 0
            }

优缺点：

优点：兼容大部分浏览器

缺点：用zoom:1会触发hasLayout。

推荐使用方案一和方案四来应对取消浮动问题，另外，可以把清除浮动代码写成公共类，减少代码冗余。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjQzMzE2_size_16_color_FFFFFF_t_70]: /images/20220126/a04ac242ee324a9b8ae129cd26b3bf65.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjQzMzE2_size_16_color_FFFFFF_t_70 1]: /images/20220126/4c797832afd840c19d1a8819e04964e6.png
[https_blog.csdn.net_sunny327_article_details_38071503]: https://blog.csdn.net/sunny327/article/details/38071503