The difference between block-level elements and inline elements and a simple explanation of the BFC layout

In my work, I often use some SPAN tags and DIV tags to display content, but when it comes to the wrapping of text tags, I have to spend a minute or two more to write. Today I will take a look at it.

According to the classification of tags, they can be divided into block-level elements and inline elements

What are block-level elements?

An element whose vertical space is equal to its content height is called a block-level element.

Common div, H, p tags are block-level elements

As you can see, for a normal DIV tag, the internal elements can be displayed beyond their specified height, overlapping with the external content

<head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <div id="content" class="container"> contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentc ontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent </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>Copy the code

In the above code, you can see that the content in # Content overlaps with the content in div2, and you can also see that div2 is directly newline, just to the left of its parent element, which is how normal document flow is arranged.

Of course, if the above code did not write the word-wrap attribute, the text content would extend to the right, beyond its bounds.

For inline elements, if there is space in the line, they will be displayed from left to right, otherwise they will be displayed on the next line

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

As in the code above, the content is wrapped, the left side of the div has content, and the right side is left blank

Of course, if you don’t set word-wrap to the element inside the line, the text will be extended to the right on the same line, not wrapped.

That is, for Normal flow, block-level elements arrange the item-level elements from top to bottom, the inline elements from left to right, and top to bottom on each line. Since the contents of ordinary block-level elements can easily overlap with the contents of the outside, we also need to use the BFC box model to avoid some layout problems

Take a look at the W3C definition of BFC

Floating elements and absolutely positioned elements, block-level containers that are not block-level boxes (such as inline-blocks, table-cells, and table-captions), and block-level boxes that do not have overflow value "unavailable", Both create new BFC (block-level format context) for their content.Copy the code

Ok, I didn’t see it. I don’t know why. In layman’s terms, a BFC is a container that holds nothing outside the container. Of course, it is not the kind of tag as we say, but a feature, with certain attributes, will not affect the attributes of the external tag.

How to trigger the conditions to become a BFC box model is quite simple

1:float is not null. 2:overflow is not visible. 3:display is table-cell,table-caption,inline-block. 4: Position is not static,relativeCopy the code

There are a lot of things we can do with BFC as well, the simplest is to add overflow: Auto to the # Content style above to avoid it overlapping with the content in Div2.

It can also be used for layout, clearing floats (in non-Internet Explorer browsers such as Firefox, when the height of the container is auto and the contents of the container have float elements (float is left or right), in which case the height of the container does not automatically extend to accommodate the height of the content. Causing content to spill out of a container and affect (or even destroy) the layout. This phenomenon is called float overflow, and CSS handling to prevent it is called CSS cleanup float. And prevent margin overlap