css清除浮动的三种方法

最新推荐文章于 2024-04-22 21:55:14 发布

JiuerShen

最新推荐文章于 2024-04-22 21:55:14 发布

阅读量552

点赞数

分类专栏： css 文章标签： css float

本文链接：https://blog.csdn.net/JiuerShen/article/details/70064322

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

css清除浮动的三种方法

一、概述

1. float属性可以使一个元素脱离正常的文档流，然后向左平移或者向右平移，直到碰到容器边框或者另外一个浮动元素。并且其他的文本和行内元素环绕它。

2. float属性可以改变display的计算值，但是对被设置了flex和inline-flex的元素无效。

二、清除浮动

如下图所示，由于.box都设置了浮动，所以容器元素的高度没有被撑起来，并且下方的.footer元素挤到上面去了。

页面代码为：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>demo1</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            .box {
                width: 100px;
                height: 100px;
                float: left;
                margin-right: 20px;
                background: red;
            }
            .container {
                border: 4px solid #000;
            }
            .footer {
                height: 200px;
                background: blue;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
        </div>
        <div class="footer"></div>
    </body>
</html>

清除浮动：

1. 容器元素.container设置overflow:hidden;

缺点：如果容器元素高度固定并且其子元素比它高，则子元素则会被切除超出部分。

2. 添加在末尾添加清除元素，并设置其clear属性为both | left | right

缺点：添加太多无用标签

3. 用伪元素作为最后一个子元素并设置相关属性。

.clearfix:after {
    content: '';
    display: table;
    line-height: 0;
    clear: both;
}
.clearfix {
    *zoom: 1;/*for ie7及以下*/
}

JiuerShen

关注

0
点赞
踩
0

收藏

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

css清除浮动的三种方法一、概述 1. float属性可以使一个元素脱离正常的文档流，然后向左平移或者向右平移，直到碰到容器边框或者另外一个浮动元素。并且其他的文本和行内元素环绕它。 2. float属性可以改变display的计算值，但是对被设置了flex和inline-flex的元素无效。二、清除浮动如下图所示，由于.box都设置了浮动，所以容器元素的高度
复制链接

扫一扫