专题三、清除浮动的几种方法

最新推荐文章于 2019-04-10 22:53:14 发布

Robin_Hood_

最新推荐文章于 2019-04-10 22:53:14 发布

阅读量218

点赞数

分类专栏：前端问题

本文链接：https://blog.csdn.net/rocarrot/article/details/81774074

版权

前端问题专栏收录该内容

8 篇文章 1 订阅

订阅专栏

专题三、清除浮动的几种方法

一、清除浮动原因：

当容器内有浮动元素或者都是浮动元素，导致不能撑起容器的高度，使得内容溢出到容器的外面而影响布局（浮动溢出）。

二、清除浮动常用方法

使用clear属性的空元素

    <style>
        .box{
            background-color: gray;
        }
        .box1,.box2{
            background-color: red;
            width: 300px;
            height: 300px;
            float: left;
        }
        .box2{
            height: 100px;
            background-color: blue;
            float: right;
        }
     .box3{
            clear: both;
        }
    </style>
</head>
<body>

<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>
</body>

使用CSS的overflow属性

   <style>
        .box{
            background-color: gray;
            overflow: hidden; /*或者auto*/
        }
        .box1,.box2{
            background-color: red;
            width: 300px;
            height: 300px;
            float: left;
        }
        .box2{
            height: 100px;
            background-color: blue;
            float: right;

        }
    </style>
</head>
<body>

<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
</div>

利用伪元素在后边增加一个空格‘020’，并给它赋予clear属性

    <style>
        .box{
            background-color: gray;
            /*overflow: hidden;*/
        }
        .box1,.box2{
            background-color: red;
            width: 300px;
            height: 300px;
            float: left;
        }
        .box2{
            height: 100px;
            background-color: blue;
            float: right;

        }

        .clearfix:after{
            content: "020";
            display: block;
            clear: both;
        }

        .clearfix {
            /* 触发 hasLayout */
            zoom: 1;
        }
    </style>
</head>
<body>

<div class="box clearfix">
    <div class="box1"></div>
    <div class="box2"></div>
</div>

参考资料：https://www.cnblogs.com/ForEvErNoME/p/3383539.html

Robin_Hood_

关注

0
点赞
踩
0

收藏

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

专题三、清除浮动的几种方法一、清除浮动原因：当容器内有浮动元素或者都是浮动元素，导致不能撑起容器的高度，使得内容溢出到容器的外面而影响布局（浮动溢出）。二、清除浮动常用方法使用clear属性的空元素 &lt;style&gt; .box{ background-color: gray; } ...
复制链接

扫一扫