清楚浮动的方法

最新推荐文章于 2024-06-14 11:01:38 发布

buling的小乔

最新推荐文章于 2024-06-14 11:01:38 发布

阅读量193

点赞数 1

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/jianjian_19/article/details/138574526

版权

浮动的特性

浮动元素会脱离标准流（脱标）
浮动的元素会一行内显示并且元素顶部对齐
浮动的元素会具有行内块元素的特性

清除浮动的方法

1.额外标签法

想要给谁清除浮动，就在其后额外添加一个空白标签，给其设置clear：both。

优点：通俗易懂，书写方便。

缺点：添加许多无意义的标签，结构化比较差。

clear：both：本质就是闭合浮动，就是让父盒子闭合出口和入口，不让子盒子出来

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>额外标签的添加</title>
    <style>
        #parent{
            border: 1px solid black;
        }
        #child{
            width: 100px;
            height: 100px;
            background: red;
            float: left;
        }
        #clear{
            clear: both;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="child"></div>
        <!-- 方法一  额外标签的添加 -->
        <div id="clear"></div>
    </div>   
</body>
</html>

2.给父元素添加overflow:hidden

通过触发BFC方式，实现清除浮动

优点：代码简洁

缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>给父元素添加overflow:hidden属性</title>
    <style>
        #parent{
            border: 1px solid black;
            overflow: hidden;
        }
        #child{
            width: 100px;
            height: 100px;
            background: red;
            float: left;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="child"></div>
    </div>   
</body>
</html>

3.使用after伪元素清除浮动

优点：符合闭合浮动思想，结构语义化正确。

缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout。

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素清除浮动</title>
    <style>
        #parent{
            border: 1px solid black;
            overflow: hidden;
        }
        #child{
            width: 100px;
            height: 100px;
            background: red;
            float: left;
        }
        #parent:after{
            content: "";
            display: block;
            height: 0;
            clear:both;
            visibility: hidden;
        }
        #parent{
            /* 触发 hasLayout */ 
            *zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="child"></div>
    </div>   
</body>
</html>

4.使用before和after双伪元素清除浮动

优点：代码更简洁

缺点：用zoom:1触发hasLayout.

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用before和after双伪元素清除浮动</title>
    <style>
        #parent{
            border: 1px solid black;
            overflow: hidden;
        }
        #child{
            width: 100px;
            height: 100px;
            background: red;
            float: left;
        }
        #parent:after,#parent:before{
            content: "";
            display: table;
        }
        #parent:after{
            clear: both;
        }
        #parent{
            *zoom: 1;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="child"></div>
    </div>   
</body>
</html>

5.为父元素设置高度

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用before和after双伪元素清除浮动</title>
    <style>
        #parent{
            border: 1px solid black;
            width: 100%;
            height: 100px;
        }
        #child{
            width: 100px;
            height: 100px;
            background: red;
            float: left;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="child"></div>
    </div>   
</body>
</html>

buling的小乔

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
清楚浮动的方法

clear：both：本质就是闭合浮动，就是让父盒子闭合出口和入口，不让子盒子出来。缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout。想要给谁清除浮动，就在其后额外添加一个空白标签，给其设置clear：both。缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素。缺点：用zoom:1触发hasLayout.缺点：添加许多无意义的标签，结构化比较差。优点：符合闭合浮动思想，结构语义化正确。优点：通俗易懂，书写方便。
复制链接

扫一扫