草庐IT

css拾遗(12)-BFC

姜治宇 2023-03-28 原文

BFC是块级格式化上下文的意思，全称block formatting context，这是元素自带的属性，可通过overflow来触发它。
BFC里的内容，不会跟外部的元素重叠或者互相影响。如果给元素增加clear属性，它只会清除自身所在BFC内的浮动。
给元素添加以下的任意属性值都会创建BFC。

1、 float: left或right，不为none即可。
2、 overflow:hidden、auto或scroll，不为visible即可。
3、display:flex
4、 position:absolute或position: fixed

看个例子：
1.png
<!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>
        .content{
            max-width:1080px;
            margin: 0 auto;
        }
        .media{
            float:left;
            width:50%;
            padding:10px;
            background-color: lightblue;
            border-radius: 6px;
        }
        .media-image {
            width:200px;
            height:100px;
            float:left;
            margin-right:20px;
        }

    </style>
</head>
<body>
    <div class="content">
        <div class="media">
            <img class="media-image" src="https://img2.doubanio.com/view/note/l/public/p82460871.webp" alt="" />
            <div class="media-body">
                <h4>宫崎骏电影</h4>
                <p>精选宫崎骏经典语录大全 宫崎骏经典语录大全 1、爱,不是寻找一个完美的人,而是学会用完美的眼光欣赏那个不完美的人。 2、不管前方的路有多苦,只要走的方向正确,不管多么崎岖...</p>
            </div>
        </div>
    </div>

</body>
</html>

media容器和里面的图片都设置了浮动，此时文字是环绕在图片周围的，我们希望的是让文字靠右边显示：
2.png

怎么实现呢？
直观上的理解，我们可以清除一下图片底部的浮动，然后让文字右浮动即可。

<!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>
        /*如果用float布局，清除浮动*/
        .clearfix::before,
        .clearfix::after {
            display: table;
            content: " ";
        }

        .clearfix::after {
            clear: both;
        }

        .content {
            max-width: 1080px;
            margin: 0 auto;
        }

        .media {
            float: left;
            width: 50%;
            padding: 10px;
            background-color: lightblue;
            border-radius: 6px;
        }

        .media-image {
            width: 200px;
            height: 100px;
            float: left;
            margin-right: 20px;
        }

        .media-body {

            float: right;

        }
    </style>
</head>

<body>
    <div class="content">
        <div class="media">
            <img class="media-image clearfix" src="https://img2.doubanio.com/view/note/l/public/p82460871.webp" alt="" />
            <div class="media-body">
                <h4>宫崎骏电影</h4>
                <p>精选宫崎骏经典语录大全 宫崎骏经典语录大全 1、爱,不是寻找一个完美的人,而是学会用完美的眼光欣赏那个不完美的人。 2、不管前方的路有多苦,只要走的方向正确,不管多么崎岖...</p>
            </div>
        </div>
    </div>

</body>

</html>

但这样做无法达到目的，发现文字都跑到下面去了：
3.png

我们希望左侧图片和右侧文字之间互不干扰，所以就要用到BFC，将文字区域增加overflow属性，即可达到目的。

<!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>
        .content{
            max-width:1080px;
            margin: 0 auto;
        }
        .media{
            float:left;
            width:50%;
            padding:10px;
            background-color: lightblue;
            border-radius: 6px;
        }
        .media-image {
            width:200px;
            height:100px;
            float:left;
            margin-right:20px;
        }
        .media-body {
            overflow: auto;/*创建BFC*/
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="media">
            <img class="media-image" src="https://img2.doubanio.com/view/note/l/public/p82460871.webp" alt="" />
            <div class="media-body">
                <h4>宫崎骏电影</h4>
                <p>精选宫崎骏经典语录大全 宫崎骏经典语录大全 1、爱,不是寻找一个完美的人,而是学会用完美的眼光欣赏那个不完美的人。 2、不管前方的路有多苦,只要走的方向正确,不管多么崎岖...</p>
            </div>
        </div>
    </div>

</body>
</html>
拾遗cssgtltsection

有关css拾遗(12)-BFC的更多相关文章

  1. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  2. css - 用 watir 检查标签类？ - 2

    我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  3. ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2

    我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1

  4. ruby-on-rails - Rails - 理解 application.js 和 application.css - 2

    rails新手。只是想了解\assests目录中的这两个文件。例如，application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文，我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢？我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件？同样，我正在按照一些说明安装TwitterBootstrap(http:

  5. css - Rails 4.1 和 Bootstrap 3 字形图标不工作 - 2

    我正在尝试消除使用Bootstrap3的Rails4元素中的glyphicon错误。我没有使用任何Bootstrapgem将其添加到Assets管道中。我手动将bootstrap.css和bootstrap.js添加到各自的app/assets目录下，分别添加到application.css和application.js什么的我现在在网络浏览器的控制台中看到以下内容:GEThttp://localhost:3000/fonts/glyphicons-halflings-regular.woff404(NotFound)localhost/:1GEThttp://localhost:30

  6. css - rails 萨斯 : variables are not passed with @import - 2

    我有一个使用twitterbootstrap和sass的Rails元素。scss文件结构化到文件夹中，所以我有更好的概述。现在我想为包含我的颜色等的全局变量定义一个文件，并将这些值传递给其他文件，这样我就有更少的冗余代码。虽然所有代码都已正确导入和应用，变量不起作用。这是当前的设置:样式表/application.css.scss/**=require_self*=require_tree*//*stylesheets/||–base/||–_reset.scss#Reset/normalize||–_typography.scss#Typographyrules||–componen

  7. 深度学习12. CNN经典网络 VGG16 - 2

    深度学习12.CNN经典网络VGG16一、简介1.VGG来源2.VGG分类3.不同模型的参数数量4.3x3卷积核的好处5.关于学习率调度6.批归一化二、VGG16层分析1.层划分2.参数展开过程图解3.参数传递示例4.VGG16各层参数数量三、代码分析1.VGG16模型定义2.训练3.测试一、简介1.VGG来源VGG（VisualGeometryGroup）是一个视觉几何组在2014年提出的深度卷积神经网络架构。VGG在2014年ImageNet图像分类竞赛亚军，定位竞赛冠军；VGG网络采用连续的小卷积核（3x3）和池化层构建深度神经网络，网络深度可以达到16层或19层，其中VGG16和VGG

  8. css - Jekyll 和自定义 CSS - 2

    有没有一种方法可以在jekyll站点中包含自定义css标签，同时将markdown用于入口文件？例如，当我想突出显示某个段落时？ 最佳答案 Markdown和YAMLFrontMatter都内置了这个。但你可以自己制作。比如说，您有foo.css想要包含在某些帖子中。在_posts/2013-02-03-higligting-foo.markdown中:---css:footitle:"DrupalImagecachesecurityvulnarabilitywithDDOSattackexplained"tags:[drupal,

  9. ruby-on-rails - 无法构建 gem native 扩展 (mkmf (LoadError)) - Ubuntu 12.04 - 2

    这个问题在这里已经有了答案:Unabletoinstallgem-Failedtobuildgemnativeextension-cannotloadsuchfile--mkmf(LoadError)(17个答案)关闭9年前。嘿，我正在尝试在一台新的ubuntu机器上安装rails。我安装了ruby​​和rvm，但出现“无法构建gemnative扩展”错误。这是什么意思？$sudogeminstallrails-v3.2.9(没有sudo表示我没有权限)然后它会输出很多“获取”命令，最终会出现这个错误:Buildingnativeextensions.Thiscouldtakeawhi

  10. ruby - 使用 OpenSSL ruby​​ 从一个 .p12 文件中提取多个 key - 2

    我想知道如何从Apple.p12文件中提取key。根据我有限的理解，.p12文件是X504证书和私钥的组合。我看到我遇到的每个.p12文件都有一个X504证书和至少一个key，在某些情况下有两个key。这是因为每个.p12都有一个Apple开发人员key，有些还有一个额外的key(可能是Appleroot授权key)。我只考虑那些具有两个key的.p12文件是有效的。我的目标是区分具有一个key的.p12文件和具有两个key的.p12文件。到目前为止，我已经使用OpenSSL来检查X504文件和任何.p12的key。例如，我有这段代码可以检查目录中的所有.p12文件:Dir.glob(

随机推荐