清除浮动的方法

最新推荐文章于 2024-03-29 03:54:52 发布

ㅤ阿龙

最新推荐文章于 2024-03-29 03:54:52 发布

阅读量233

点赞数 1

文章标签： css 前端 html

本文链接：https://blog.csdn.net/a_dragon_/article/details/124297774

版权

float:浮动，使元素同行排列，脱离文档流。

我们经常使用float进行布局，但也有一些问题存在，需要清除浮动元素的影响。下面说一下清除浮动的方法。

1.使用伪元素 :after（推荐使用）

给使用浮动的父元素添加伪元素:after,添加如下样式

clear: both;
content: '';
display: block;
height：0;
visibility: hidden;

2.在浮动元素后增加空标签，并添加clear:both
3.在浮动元素后增加br标签并使用自身的html属性

<br clear="all">

4.给使用浮动的父元素添加overflow: hidden;
5.给使用浮动的父元素添加overflow: auto;
6.给使用浮动的父元素添加display: table;
7.给使用浮动的父元素添加float: left;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除浮动的方法</title>
    <style>
        .content {
            height: 100px;
            width: 50%;
            background: skyblue;
        }

        .left {
            float: left;
        }

        div {
            padding: 20px;
        }

        .side {
            width: 20%;
            background: lightblue;
        }

        .warp {
            border: 1px solid blue;
            width: 300px;
            margin: 30px auto 5px;
            background: #F5F5F5;
        }

        .footer {
            border: 1px solid #ccc;
            background: #999;
            width: 300px;
            margin: 5px auto 30px;
        }
        .clear{
            clear: both;
        }
        .close{
            /* overflow: hidden; */
            /* overflow: auto; */
            /* display: table; */
            /* float: left; */
        }
        /* 使用伪元素:after */
        .close:after{
            clear: both;
            content: '';
            display: block;
            height: 0;
            visibility: hidden;
        }
    </style>
</head>

<body>
    <div class="warp close">
        <div class="content left">
            内容
        </div>
        <div class="side left">
            侧边栏
        </div>
        <!-- <br clear="all"> -->
        <!-- <div class="clear"></div> -->
    </div>
    <div class="footer">
        底部导航
    </div>
</body>

</html>

ㅤ阿龙

关注

1
点赞
踩
0

收藏

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

float:浮动，使元素同行排列，脱离文档流。我们经常使用float进行布局，但也有一些问题存在，需要清除浮动元素的影响。下面说一下清除浮动的方法。1.使用伪元素 :after（推荐使用）给使用浮动的父元素添加伪元素:after,添加如下样式clear: both;content: '';display: block;height：0;visibility: hidden;2.在浮动元素后增加空标签，并添加clear:both3.在浮动元素后增加br标签并使用自身的html属性
复制链接

扫一扫