清除浮动(4种方法)

最新推荐文章于 2022-04-20 23:09:10 发布

雨水芬纷

最新推荐文章于 2022-04-20 23:09:10 发布

阅读量221

点赞数

分类专栏：前端文章标签：清除浮动 CSS 布局 BFC 伪元素

本文链接：https://blog.csdn.net/u014773932/article/details/121282120

版权

前端专栏收录该内容

53 篇文章 3 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除浮动</title>
    <!-- 方案：
    1. 固定宽高
    2. 添加新元素 <div style="clear: both;"></div>
    3. 使用伪元素 div:after{ content: ''; clear: botn; }
    4. 触发父元素BFC -->

    <style>
        .box-wrapper{
            width: 150px;
            padding: 10px;
            border: 1px solid red;
        }
        img{
            width: 45px;
            height: 45px;
            float: left;
            padding: 0 10px;
        }
        .right-box{
            float: right;
        }
        .right-box-title{
            font-size: 16px;
            color: #1c1f21;
            font-weight: 600;
        }
        .right-box-content{
            font-size: 12px;
            color: #1c1f21;
        }

        /* <!-- 第一种： 父元素固定宽高 --> */
        .box-fix{
            height: 45px;
        }

        /* <!--第三种： 使用伪元素 div:after{ content: ''; clear: botn; display: block;} --> */
        .box-class::after{
            content: '';
            clear: both;
            display: block;
        }

        /* <!--第三种：触发父元素BFC  --> */
        .box-bfc{
            /* overflow: hidden; */
            /* float: left; */
            /* position: absolute; */
            display: inline-block;
        }
    </style>
</head>
<body>
    <!-- 第一种： 父元素固定宽高 -->
    <div class="box-wrapper box-fix">
        <img src="./favicon.png">
        <div class="right-box">
            <div class="right-box-title">西麦燕麦片</div>
            <div class="right-box-content">富含膳食纤维</div>
        </div>
    </div>
    <br>

    <!--第二种： 添加新元素 <div style="clear: both;"></div> -->
    <div class="box-wrapper">
        <img src="./favicon.png">
        <div class="right-box">
            <div class="right-box-title">西麦燕麦片</div>
            <div class="right-box-content">富含膳食纤维</div>
        </div>
        <div style="clear: both;"></div>
    </div>
    <br>

    <!--第三种： 使用伪元素 div:after{ content: ''; clear: botn; } -->
    <div class="box-wrapper box-class">
        <img src="./favicon.png">
        <div class="right-box">
            <div class="right-box-title">西麦燕麦片</div>
            <div class="right-box-content">富含膳食纤维</div>
        </div>
    </div>
    <br>

    <!--第四种：触发父元素BFC  -->
    <div class="box-wrapper box-bfc">
        <img src="./favicon.png">
        <div class="right-box">
            <div class="right-box-title">西麦燕麦片</div>
            <div class="right-box-content">富含膳食纤维</div>
        </div>
        <!-- 缺点的实现,overflow:hidden可能会裁剪正常显示的元素 -->
        <!-- <div style="width: 300px; height: 300px; background-color: black;"></div> -->
    </div>
</body>
</html>

雨水芬纷

关注

0
点赞
踩
0

收藏

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

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>清除浮动</title> <!-- 方案： 1. 固定宽高 2. 添加新元素 <...
复制链接

扫一扫