块级元素与行内元素的区别以及BFC模型的简单解释

块级元素与行内元素的区别以及BFC布局的简单解释

工作中其实经常用到一些span标签和div标签来进行内容的显示，但涉及到文本标签的换行，总得多花那么一两分钟多写一下，今天就专门来瞅一瞅。

按照标签的分类可以分为块级元素和行内元素

什么是块级元素？

独占其父元素的整个水平空间，垂直空间等于其内容高度的元素称之为块级元素。

我们常用的div、h、p等标签都属于块级元素

可以看到，对于一个普通的div标签而言，其内部元素是可以超出其限定高度进行显示，有与外界内容重叠的情况

  
  


  

    

    contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
    
    
    
div2
    

      div3
    
    

      div4
    

  

就上述代码而言可以看到#content中的内容会跟div2中的内容重叠，同时也可以看到div2是直接换行，紧贴着其父元素的左侧往下排列，这就是普通文档流的排列规则。

当然如果上面的代码没有写word-wrap属性，文本内容会向右延伸，超出其边界。

而对于行内元素而言，如果行内有空间，他们会在行内从左往右排列，否则的话会换下一行显示

  
    contentcontentcontent
  
  
    contentcontentcontent
  
  
    contentcontentcontent
  

像上面的代码，content会自动换行，div的左侧有内容，右侧则直接留白，有兴趣的手动练习一下

当然，如果行内元素你没给他设置word-wrap属性的话，文本内容也会在同一行内往右延伸，不会自动换行的。

也就是说对于文档流（Normal flow/正常流）而言块级元素将款级元素自从上往下、行内元素在每行中从左往右，从上往下的顺序排列。由于普通的块级元素里面的内容很容易与外面的内容重叠产生影响，所以我们还需要使用BFC盒子模型来避免一些布局问题

看下W3C上对BFC的定义

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。

ok，看了跟没看一样，完全不知道所以然。用通俗的话来讲，BFC就是一个容器，这个容器内存放任何内容都不会影响到外部容器。当然，他并不是像我们说的标签的那种，而是一种特征，具备了某些属性，就不会影响到外部标签的属性。

如何触发成为一个BFC盒模型的条件还是挺简单的

1:float的值不为null
2:overflow的值不为visible
3:display的值为table-cell,table-caption,inline-block
4:position的值不为static,relative

我们利用BFC也可以做很多事情，最简单的就是在上面的#content样式中加一个overflow:auto来避免其与div2中的内容重叠。

此外还可以用于布局、清除浮动(在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。)、防止margin重叠等场景