preface

This first article in the CSS Layout series covers some of the basic concepts in CSS. In this article, you’ll look at three different layouts: normal document flow, float, and positioning.

The document flow

Document Flow, also known as Normal Flow, is one of the most basic layouts in CSS. As we know, in the CSS box model, all HTML elements are abstracted into boxes. These boxes, in turn, fall into two categories: Block boxes and Inline boxes. The document flow illustrates how these two types of boxes are rendered on a Web page. That is, block boxes and inline boxes set how any layout property will be rendered in a Web page. In the case of a block box, block elements are arranged from top to bottom, and each block element occupies a single row. Take a simple text example:

  <div class="container">           
    <div class="normal">1</div>  
    <div class="normal">2</div>
    <div class="normal">3</div>           
  </div>
Copy the code

The effect presented in the page is as shown in the figure below:



In the case of inline boxes, you arrange the boxes from left to right, and then each inline element does not break a line. Here’s an example:

<div class="container">           
    <div class="normal">1
        <span>inline-box</span>
    </div>  
    <div class="normal">2</div>
    <div class="normal">3</div>           
</div>
Copy the code

The rendering effect on the page is as shown in the figure below:

floating

The document flow is described above. After all that, normal document flow is essentially the default rendering of HTML elements in the browser. Next we’ll take the HTML element out of the normal flow of the document and implement the layout we want it to be. The first is Float. Let’s start with the definition of Float. The W3C definition of float is as follows:

A float is a box that moves left or right on the current row. The most interesting feature of a float is that content can flow along its side. Content flows down the right side of the left float box and down the left side of the right float box.

There are a few things to be clear about the definition of float:

  1. Floating must be out of the normal document flow. That is, the height of the floating element is not calculated to the height of the normal text stream unless other attributes are set.
  2. A float is a box that moves to the left or right of the current row. This means that the floating element will only run to the left or right of the parent element and will not change the relative number of lines floating in the text page.
  3. Keyword problem with float: None, left, right, inherit, inline-start, inline-end. That is, floating keywords are only related to inline elements.
  4. Floating elements do not affect the normal layout of the CSS box model, but elements inside the box model make room for floating elements.

Next, let’s use an example to illustrate these features of float.

  • html:
 <div class="container">           
    <div class="normal">1</div>  
    <div class="normal">2</div>
    <div class="float">float</div>
    <div class="normal">3</div>   
    <div class="normal">4</div>           
</div>
Copy the code
  • css:
.normal {
    width: 300px;
    background: pink;
    border: 3px solid red;
    text-align: center;
    font-size: 30px;
}

.float {
    width: 100px;
    background: green;
    text-align: center;
    font-size: 30px;
    float: left;
}
Copy the code

In these two pieces of code, the first HTML code represents the structure of the HTML element: adivThe tag contains fivedivTags, and sets the class to which they belong. The CSS code then styles the normal document flow and the floating elements, respectively. Obviously in the CSS codefloat:left;This line of code indicates that the element floats. This section of code looks like the following:

Compared to this display, let’s look at the above characteristics of the floating element:

  1. In this code, I didn’t set the height of the container div, so the height of the container should be adaptive. Obviously, the height of the floating element was not calculated when calculating the height of the document flow. There are originally five div tags in the parent element, but only four unfloating div tags are counted.
  2. The second property depends on the relative position of the float. In HTML documents,<div>float</div>Elements in the<div>2</div>and<div>3</div>In between. When float is not set, it should be<div>2</div>and<div>3</div>I’m going to empty out the corresponding size, and then I’m going to<div>float</div>This element is inserted in the middle here. Now that the float is set, it is removed from the normal document flow, but the position remains<div>2</div>and<div>3</div>In between. It just stacks up<div>2</div>Down here.
  3. This feature is just a matter of parameters, so I won’t go into detail here
  4. The fourth feature is also obvious. Floating elements are simply stacked on top of the box model. The frame and background of the box model rendered below it are still in place, but the content width has been recalculated.

Floating feels like the papercutting game we used to play when we were kids, where we would cut out a portion of the normal HTML document flow and then push the remaining elements up. Finally, fold the cut to the left or right. The process is shown in the figure below:

Floating layout problem

There are a few problems with using floats for layouts. These issues can be summed up as parent collapse and text wrapping.

  • Parent element collapse: If the child elements of the parent element are set to float, the height of the parent element will be 0, resulting in the collapse of the parent element. The specific effect is shown in the figure:

  • Text wrap: When element float is set, the word elements of the in-line box are arranged around the floating element. The specific effect is shown in the figure:



This type of wrap is acceptable, but if both block and inline elements are present, the result may be something like the following:



In this display, the block elements and the floating elements are stacked on top of each other, and the text is arranged on the other side of the floating elements. It looks weird.

The solution

To solve these problems, we need to trigger the BFC.

  • usingclearRemove the floating
  • Set up theoverflowValue is not visible
  • The display property is set to flow-root

After the float is cleared, the display effect is:

Warm prompt

Because of the destructive effect of floating on the layout of other elements, float should not be overused in layout. There is an article that goes into more depth about why floats should not be abused. Here’s a link to an in-depth study, explanation, and extension of CSS Float

positioning

The second way out of the normal document flow is positioning. Position, literally, is the fixed position of an HTML element in a certain format. Positioning is achieved by the position attribute, which specifies where a particular box should be in the overall layout and what effect it will have on surrounding elements. It is worth mentioning that float and normal document flow both specify a positioning mode in addition to the positioning mode specified by the position attribute.

  • position : static
  • position : absolute
  • position : relative
  • position : fixed
  • position : sticky
  • position : inherit

Position: inherit Needless to say, it clearly represents the inheritance of parent element positioning. Position: static is the default value for the browser. It represents static text positioning and specifies how the normal flow of documents should be positioned without any other effect on the layout of the page. So let’s focus on the other four values for the other positions.

Position: absolute VS position: relative

For the position property, there are two values that are relative. One is “relative” and the other is “absolute”. Translating them into Chinese reveals that one is relative and the other is absolute. They all use the values top, right, bottom, and left to determine the location of an element. So how do we define this relative and absolute? These two attributes have different reference objects, so let’s compare these two concepts:

  • Relative: An element offset with this value is relative to where it should be in the document stream.
  • Absolute: The element offset with this value is relative to the first parent element whose position is not static.

Because of relativity and absoluteness, the two are often used together. Let’s look at an example:

 <div class="accordionMenu">
    <div class="menuSection" id="brand">
        <h2><a href="#brand">Brand</a></h2>
        <p>Lorem ipsum dolor...</p>
    </div>

    <div class="menuSection" id="promotion">
        <h2><a href="#promotion">Promotion</a></h2>
        <p>Lorem ipsum dolor sit amet...</p>
    </div>

    <div class="menuSection" id="event">
        <h2><a href="#event">Event</a></h2>
        <p>Lorem ipsum dolor sit amet...</p>
    </div>
</div>
Copy the code

Let’s look at his CSS location properties:

.accordionMenu h2 {
    margin: 5px 0;
    padding: 0;
    position: relative;
}
.accordionMenu h2:before {
    border: 5px solid #fff;
    border-color: #fff transparent transparent;
    content: "";
    height: 0;
    position: absolute;
    right: 10px;
    top: 15px;
    width: 0
}
Copy the code

In this code, we will.accordionMenuUnder theh2The position attribute of the label is set to Relative, and then the pseudo-element is seth2:beforeThe position attribute of is set to Absolute. Among them,h2:beforeA small triangle is drawn using the border feature. Obviously, if I set the offset,h2It’s going to be shifted from its original position, andh2:beforeIs going to be relative toh2The element is offset. In this example, the setting isright: 10px; top: 15px;So here’s what’s going to happenh2:beforeRelative to theh2Offset, and distanceh210px to the right, the distanceh2The top 15px. The specific display result is as shown in the figure below:

Position: fixed

The behavior of fixed and absolute positioning is similar. The difference is that they are positioned from different starting points. Fixed positioning is always positioned relative to the browser window. His display effect, I think we should be able to see more often. For example, some small advertisements on the Internet, no matter how the page is sliding, the window of small advertisements is always in the same position will not change. This type of positioning is called fixed positioning. Again, he uses the top, right, bottom, and left properties to calculate the position.

Position: sticky

The effect of the sticky positioning implementation is to allow the defined element to act as a relative positioning until it slides to a certain threshold point, after which it becomes fixed. It’s a mixture of relative positioning and fixed positioning. The example I’m going to use for this targeting model is again the example of small ads.

Warm prompt

In page layout, this positioning mode can only be used for local fine-tuning, not to position the entire page. Doing so can mess up the entire page layout and make later maintenance and development difficult.

Write in the back

Everyone passing by big guy, like to give a thumbs up, don’t like to have a look. If there is any problem, I hope the big guy can help to point out (^▽^) CSS layout series of articles to be continued…