清除浮动的三种方法

最新推荐文章于 2022-07-09 19:43:34 发布

weijia_kmys

最新推荐文章于 2022-07-09 19:43:34 发布

阅读量302

点赞数 1

分类专栏： Web 文章标签： clear 清除浮动 float

本文链接：https://blog.csdn.net/weijia_kmy/article/details/80150563

版权

Web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>清除浮动的三种方法</title>
    <style type="text/css">
        .div3{
            background: blue;
            border: 1px solid gold;
        }
        .div3:after{
            clear: both;
            content: ".";
            height: 0;
            display: block;
            visibility: hidden;
        }
    </style>
</head>

<body>
    <div style="background: blue;border: 1px solid gold;">
        使用空标签清除浮动。增加了无意义的结构元素
        <div style="float: left; background:#cccccc; line-height:100px;">left</div>
        <div style="float: right; background:#cccccc; line-height:200px;">right</div>
        <div style="clear: both;"></div>
    </div>
    <div style="background: blue;border: 1px solid gold; overflow: hidden; zoom:1;">
        使用overflow属性。使用overflow的时候，可能会对页面表现带来影响。
        <div style="float: left; background:#cccccc; line-height:100px;">left</div>
        <div style="float: right; background:#cccccc; line-height:200px;">right</div>
    </div>
    <div class="div3">
        使用after伪对象清除浮动。该方法只适用于非IE浏览器。
        <div style="float: left; background:#cccccc; line-height:100px;">left</div>
       <div style="float: right; background:#cccccc; line-height:200px;">right</div>
    </div>
</body>

</html>

weijia_kmys

关注

1
点赞
踩
0

收藏

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

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;清除浮动的三种方法&lt;/title&gt; &lt;style type="text/css"&gt;
复制链接

扫一扫