清除浮动的几种方式

panliyou

于 2021-01-18 18:33:28 发布

阅读量181

点赞数

分类专栏： html和css的那些事 web前端开发文章标签： css3 html5

本文链接：https://blog.csdn.net/weixin_39411655/article/details/112789612

版权

html和css的那些事同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

web前端开发

8 篇文章 0 订阅

订阅专栏

清除浮动的几种方式

浮动：浮动元素在文档中不占位置脱离标准流，所以它在页面中没有高度，标准流的元素会占据浮动元素的原来位置导致浮动元素盖住标准流元素，但很多时候也要用到浮动所以需要清除浮动带来的影响。

1.给浮动元素的父元素添加伪元素清除浮动带来的影响（推荐）
原理：浮动元素的前后添加了伪元素并转为了块级元素加上clear: both;清除左右两侧的浮动.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /*   伪元素清除浮动带来的影响 
         伪元素必写属性 content：'';内容为空
         display: block;转为块级元素 
         visibility: hidden;元素隐藏 
         clear: both;清除左右两侧的浮动  */

        .clearfix::after,
        .clearfix::before {
            content: "";
            display: block;
            height: 0;
            visibility: hidden;
            clear: both;
        }

        /* ie6,ie7不能用after伪元素,为兼容IE6,IE7 */
        .clearfix {
            zoom: 1
        }

        li {
            list-style: none;
        }

        ul {
            width: 1200px;
            margin: 40px auto 0;
            border: 4px solid tomato;
        }

        li {
            float: left;
            width: 200px;
            height: 200px;
            background-color: #6cf;
            margin-right: 10px;
        }

        .footer {
            height: 100px;
            background-color: #000;
        }
    </style>
</head>

<body>
    <ul class="clearfix">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div class="footer"></div>
</body>

</html>

2.给浮动元素的父元素添加高度清除浮动带来的影响
原理：浮动元素没有高度在文档中不占位置，给父元素高度包裹子元素。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        ul {
            width: 1200px;
            margin: 40px auto 0;
            border: 4px solid tomato;
            /* li进行了浮动，父元素为ul,给ul添加高度清除浮动 */
            height: 200px;

        }

        li {
            float: left;
            width: 200px;
            height: 200px;
            background-color: #6cf;
            margin-right: 10px;
        }

        .footer {
            height: 100px;
            background-color: #000;
        }
    </style>
</head>

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div class="footer"></div>
</body>

</html>

3.给浮动元素的父元素添加 overflow: hidden;清除浮动带来的影响
原理：float+overflow会触发BFC（块级格式化上下文）独立的块级上下文可以包裹浮动流，包含块会把浮动元素的高度也计算在内。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        ul {
            width: 1200px;
            margin: 40px auto 0;
            border: 4px solid tomato;
            /* 
                给浮动的父元素添加overflow: hidden 清除浮动带来的影响，让父元素自动检测高度
             其中原理：float+overflow会触发BFC（块级格式化上下文）
             独立的块级上下文可以包裹浮动流，包含块会把浮动元素的高度也计算在内
             */
            overflow: hidden;

        }

        li {
            float: left;
            width: 200px;
            height: 200px;
            background-color: #6cf;
            margin-right: 10px;
        }

        .footer {
            height: 100px;
            background-color: #000;
        }
    </style>
</head>

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div class="footer"></div>
</body>

</html>

4.给浮动元素的后面添加元素添加clear属性清除浮动带来的影响
原理：clear在官方文档中表示就是用来清除浮动元素带来的影响，clear: both;在左右两侧均不允许浮动元素。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .clear {
            /* clear属性是专门用来清除浮动元素的
             用法：在浮动元素后面添加空元素给该元素添加clear: both;即可 
            作用：在左右两侧均不允许浮动元素。
            弊端，给页面添加了无意义的标签 */
            clear: both;
        }

        li {
            list-style: none;
        }

        ul {
            width: 1200px;
            margin: 40px auto 0;
            border: 4px solid tomato;
        }

        li {
            float: left;
            width: 200px;
            height: 200px;
            background-color: #6cf;
            margin-right: 10px;
        }

        .footer {
            height: 100px;
            background-color: #000;
        }
    </style>
</head>

<body>
    <ul class="clearfix">
        <li></li>
        <li></li>
        <li></li>
        <li></li> 
    </ul>
    <div class="clear"></div>
    <div class="footer"></div>
</body>

</html>

panliyou

关注

0
点赞
踩
1

收藏

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

清除浮动的几种方式浮动：浮动元素在文档中不占位置脱离标准流，所以它在页面中没有高度，标准流的元素会占据浮动元素的原来位置导致浮动元素盖住标准流元素，但很多时候也要用到浮动所以需要清除浮动带来的影响。1.给浮动元素的父元素添加伪元素清除浮动带来的影响（推荐）原理：浮动元素的前后添加了伪元素并转为了块级元素加上clear: both;清除左右两侧的浮动.<!DOCTYPE html><html lang="en"><head> <meta char
复制链接

扫一扫

专栏目录