BFC笔记

最新推荐文章于 2024-03-23 00:06:53 发布

Don_ixu

最新推荐文章于 2024-03-23 00:06:53 发布

阅读量76

点赞数

分类专栏： HTML-CSS 文章标签： html css

本文链接：https://blog.csdn.net/Donnien/article/details/118035265

版权

HTML-CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .container{
            background-color: #ccc;
            /* 将container转成BFC */
            overflow: hidden; 
        }
        .container img {
            /* 浮动使得内部的img元素影响到了外面的布局 */
            float: left;
        }
        .container p {
            /* 由于img浮动使得p的宽度占了和父元素一样的宽度 会影响到其他元素的布局 所以也要转成BFC */
            overflow: hidden;
        }
    </style>
</head>
<body>
    <!-- 
        BFC Block formatting context 块级格式化上下文
        形成独立的渲染区域 不能延伸到其他其他区域
        内部元素的渲染不会影响外界

        形成BFC的常见条件
        浮动元素        float不是none
        绝对定位元素    position是absolute或fixed
        块级元素        overflow不是visible
        flex元素
        inline-block元素
     -->

     <div class="container">
         <img src="./test.png" alt="">
         <p>hello 小林</p>
     </div>
</body>
</html>