On the floating

Elements that are set to float leave the current document flow and move left or right until the edge encounters another floating element or reaches a boundary. Normal elements have no effect on alignment. Floating is a double-edged sword that brings convenience to our layout while having some drawbacks that need to be addressed. For example, the most common collapse of parent elements. As shown below:

.warper{
    width: 200px;
    border:1px solid  #ff6633;
}
.float-1{
    float: left;
    background: blue;
    height: 100px;
    width: 100px;
}
.float-2{
    float: left;
    background: #ff0;
    height: 50px;
    width: 100px;
}
//html  
<div class='warper'>
    <div class="float-1"></div>
    <div class="float-2"></div>
</div>
Copy the code

Know how to float

In summary, there are roughly the following categories:

1. Empty end element or after pseudo-element or br to clear 2. 3. The parent element sets overflow to hidden or Auto 4. Parent element display: tableCopy the code

General classification, can be divided into two categories, 1 use the attribute of clear, the following can be categorized into one category, are achieved by triggering BFC. The following is a detailed look at these two categories of floating clearance methods and principles.

The clear property

The clear property states that the edges of the element box cannot be adjacent to the floating element. This property affects only the element itself that uses the purge, not other elements. In other words, if a floating element already exists, it will not be affected as much as the original element. In the first way, our fill-in elements (as I call them) do just that.

Warper :after {content: ''; height: 0; display: block; clear: both; }Copy the code

After setting clear: both indicates that I cannot accept floating elements on either side. The position of the pseudo-element is below the floating element as shown in the figure below:

This obviously doesn’t support the height of the parent element. After setting it up, you need to rearrange it.

Since both sides do not accept floating elements, but the floating element position is also determined, we can only put the pseudo-element below, as shown in the figure below:

As you can see, the pseudo element is at the bottom, and the height from the top is the height of the float element, which incidentally supports the parent element. The same applies to any fill element (display block), which serves the same purpose. Before we look at the following principles we need to look at the definition of BFC.

BFC

Block-level formatting Context: Block Formatting Context (BFC)

The literal definition may seem confusing, but the BFC is a separate rendering area with only block-level box participation, which dictates how the internal block-level box is laid out and has nothing to do with the outside of the area. In the words of Zhang Xinxu, the characteristic expression principle of BFC elements is that the internal sub-elements will not affect the external elements no matter how turbulent and turbulent they are. So it makes sense to avoid margin penetration and clear floats.

As explained below:

In a block formatting context, Each box’s left outer edge touches the left edge of the containing block (for right-to-left formatting, B. This is true even in the presence of floats (although a box’s line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the Floats. (In a BFC, the left outer border of each box is next to the left border of the containing block. This is true even if there is a float (although the borders of a box will shrink due to the float), unless a new BFC float is created inside the box, the box itself will become narrower).

The characteristics of landing

  1. The block-level formatting context prevents margin overlay
  2. Block-level formatting contexts do not overlap floating elements
  3. Block-level formatting contexts can often contain floats

In other words, the element that creates the BFC is a separate box, and the child elements inside do not affect the layout of the outside elements, and vice versa while the BFC is still a normal flow in the document. Therefore, the floating is solved, and I will make a special article about BFC in the future.

See here, you can see why it can be used to clear the float, the BFC element is a very individual existence, no matter how to do inside, external performance is always the same. As you can probably guess, the above cleanup methods that utilize BFC must trigger the BFC condition, making the parent element become BFC. Let’s take a look at the conditions that trigger the BFC and see if they are what we think they are.

BFC trigger condition

CSS3 makes a change to this specification, called flow root, and further explains the trigger conditions.

Display (table-cell, table-caption, Inline-block) position (Absolute, fixed) fieldset elementCopy the code

By way of comparison, the methods mentioned above only trigger the BFC. Look at an example

.warper{ width: 200px; border:1px solid #ff6633; // Select one of the following attributes overflow: hidden; overflow: auto; float: left; display:inline-block; position: fixed; }Copy the code

conclusion

Refer to the article

CSS Multi-column adaptive layout in fluid and BFC features Understand the BFC in the CSS

How to clear a float: Clear a float Of course, more is to learn together and progress together, more please move to blog.