zoukankan      html  css  js  c++  java
  • 理解CSS中BFC

    CSS布局中有一些概念,一旦理解了这些概念,就能真正的提高你的CSS能力。这篇文章主要介绍的是关于块格式化上下文(Block Formatting Context),也就是大家俗称的BFC。你可能从未听说过这个术语,但只要你曾经使用过CSS布局,你就可能知道它是什么。理解BFC是什么,它有什么功能,以及如何创建一个BFC是非常有用的,这些能帮助你更好的理解CSS布局。

    在这篇文章中,我将会通过几个很熟悉的示例来解释BFC。我还会介绍一个新的display的值,当你理解了BFC是什么的时候,你才能了解为什么需要这个值。也就能更好的理解它的真正意义。

    什么是BFC

    通过一个简单的float布局示例就能很好的理解BFC的行为。在下面的示例中,我们创建了一个盒子(其实在CSS中,每个元素都是一个盒子),这个盒子中包含了一个设置了浮动的图片和一段文本。如果有足够多的文本内容的时候,文本会围绕着图片(把整个图片包裹起来)。

    <!-- HTML -->
     <div class="outer">
        <div class="float">I am a floated element.</div>
        I am text inside the outer box.
     </div> 
    
    /* CSS */
    
     .outer {
    	border: 5px dotted rgb(214,129,137);
    	border-radius: 5px;
    	 450px;
    	padding: 10px;
    	margin-bottom: 40px;
    }
    
    .float {
    	padding: 10px;
    	border: 5px solid rgba(214,129,137,.4);
    	border-radius: 5px;
    	background-color: rgba(233,78,119,.4);
    	color: #fff;
    	float: left;
    	 200px;
    	margin: 0 20px 0 0;
    }
    

      

      

  • 相关阅读:
    Apache+Tomcat+Mysql+php整合jsp,php
    mysql数据类型详析(转)
    有向图(拓扑排序算法)
    FLEX获取GET数据
    Flex对象与组件的数据 双向绑定
    D3D学习摘记(I)中
    [转贴]深入理解Javascript闭包
    一个相当愚蠢的概念错误
    近日小记
    D3D学习摘记(I)上
  • 原文地址:https://www.cnblogs.com/chenyablog/p/11231755.html
Copyright © 2011-2022 走看看