乐趣区

关于前端:块级元素与行内元素的区别以及BFC模型的简单解释

jiezi

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

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

依照标签的分类能够分为块级元素和行内元素

什么是块级元素？

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

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

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

<!DOCTYPE html>
<html lang=”en”>

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div>
    <div id="content" class="container">
    contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
    
    </div>
    <div class="div2">div2</div>
    <div class="div3">
      div3
    </div>
    <div class="div4">
      div4
    </div>

  </div>

</body>

<style>
  #content {
    color: blueviolet;
    word-wrap: break-word;
    width: 500px;
    height: 60px;
  }

  .div3 {float: left;}
</style>

</html>

就上述代码而言能够看到 #content 中的内容会跟 div2 中的内容重叠，同时也能够看到 div2 是间接换行，紧贴着其父元素的左侧往下排列，这就是一般文档流的排列规定。

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

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

<div id="content" class="container">
  <span>
    contentcontentcontent
  </span>
  <span>
    contentcontentcontent
  </span>
  <span>
    contentcontentcontent
  </span>
</div>

像下面的代码，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 重叠等场景

退出移动版