CSS float and clear float, comb through!

After three years of working on numerous projects, I now look back and want to put some important knowledge into plain English: What is this thing? What are the best practices? I hope to have a combing effect on my knowledge system, and also hope to be of some help to everyone.

When you’re rushing to the front end of the technology stack to learn, don’t forget to look back at the basics you already know.

In this first article, I’ll take a look at some of the most common floats in CSS and how to clear them.

What exactly is a float?

The floating core is just that: a floating element leaves the document flow and floats left/right until it hits the parent element or another floating element. Three times in silence, please!

The float was originally designed to do little more than wrap text around it, as shown below:

But as early front-end developers discovered, floating elements, which can be set to width and height and arranged inline, are a magic way between inline and block. Before inline-block came out, floating was all the rage. Until inline-block came out, floats had their own unique usage scenarios.

What are the characteristics of floating?

Floating characteristics are reflected in the preceding sentence, do not forget to read three times! In addition, the negative effect of floating is also one of its characteristics.

The float will leave the document

Out of document, that is, floating does not affect the layout of normal elements

As you can see from the figure above, the default three block elements are set to width and height, which would be a single row; If box 1 floats left/right, it ignores box 2 and box 3 until it hits the parent element. There is also a risk of overshadowing ordinary elements.

Floats can be arranged inline

Floats float left/right until they hit another float element, a feature of the float that can be arranged inline. That is, floats can be set width and height, and can be multiple lines, between block and inline.

As you can see in the figure above, floating multiple elements can achieve an effect similar to inline-block. However, if the height of each element is not consistent, a “stuck” condition can occur.

Floating causes the parent element to collapse highly

Floating out of the document flow can have a significant impact on the overall layout of the page.

// css
.box-wrapper {
  border: 5px solid red;
}
.box-wrapper .box {
  float: left; 
  width: 100px; 
  height: 100px; 
  margin: 20px; 
  background-color: green;
}

// html

       

  
        

  
        

  
        


       
Copy the code

As a result, the floating element is separated from the document flow and does not occupy the position of the document flow, so the natural parent element cannot be stretched out, so it loses height.

So what to do? Then we need to clear the float to solve the height collapse problem! Remove floating there are two main ways, namely, the clear clear floating and landing the clear float, the other you also don’t understand.

How does clear clear floats?

The clear property does not allow the floating element to be cleared to the left/right of the floating element. The underlying principle is to add enough clearance space above or below the floating element. This sentence, please repeat 5 times! Note that we split the height by clearing floats on other elements, not on floating elements.

Following the example above, let’s simply modify the HTML code as follows

       

    
        

    
        

    
        

    
        


       
Copy the code

The height collapse problem has been solved. Now, it seems that we can play with the float. Great!

Do not clear floats on float elements

But someone asked what would happen if we added clear:both to the third element.

       

    
        

    
        

    
        


       
Copy the code

Aye? Add clear to the third element: after both, the third element does not touch the left and right of the floating element, but why does the height collapse? As you might have noticed, since the third element is floating and out of the document flow, it doesn’t make sense to add clearance above and below the third element.

Clear Clears float best practices

So what’s the best practice for clear to clear floats? See the code below:

Clearfix :after {display: table; content: " "; clear: both; } // Full browser universal clearfix solution // introduced zoom to support IE6/7. clearfix:after {display: table; content: " "; clear: both; } .clearfix{ *zoom: 1; } // Zoom was introduced to support IE6/7 // and :before was added to solve the problem of margin folding in modern browsers. Clearfix :before, .clearfix:after { display: table; content: " "; } .clearfix:after { clear: both; } .clearfix{ *zoom: 1; }Copy the code

In a word, clearfix is highly recommended!

Clear BFC floating

BFC stands for block formatting context, which is laid out as a block-level box. It’s enough that we know what it is, how it triggers, how it’s used.

The main characteristics of BFC

1. A BFC is a separate container on the page, and the children of the container do not affect the outside elements, and the outside elements do not affect the children of the container.
2. The vertical distance of boxes is determined by margin. The upper and lower margins of adjacent boxes belonging to the same BFC will fold. The problem of vertical margin folding can be solved by firing the BFC of both elements separately
3. A BFC can contain a float; Usually used to solve the problem of height collapse of floating parent elements.

The “include float” feature is used by the BFC to clear floats.

Triggering mode of the BFC

We can add the following attributes to the parent element to trigger the BFC:

1. float 为 left | right
2. overflow 为 hidden | auto | scorll
3. display 为 table-cell | table-caption | inline-block | flex | inline-flex
4. position 为 absolute | fixed

So we can simply do BFC clear float by setting overflow: Auto to the parent element, but it’s best to use Overflow: Hidden for COMPATIBILITY with IE. However, the element shadow or drop-down menu is truncated, which is limited.

.box-wrapper{
  overflow: hidden;
}Copy the code

What are the applicable scenarios for floating?

Text wrap effect

This goes without saying, float is originally for text surround effect, this is the most basic

The page layout

A float can achieve a regular multi-column layout, but I personally recommend using inline-block. Floating is better for adaptive multi-column layouts, such as fixed width on the left and adaptive width on the right based on the parent element.

Multiple elements are arranged inline

If mentioned earlier, floats can implement an inline-block-like arrangement, such as inlining menu elements. But I personally recommend using inline-block.

More summary?

Was simple just want to tell me about the background of the floating, floating, floating solution, but the true together, and find a lot of knowledge need to expand, a lot of things need to break off the tear, is difficult to do, so just pick something I think is the mainstream of the more important knowledge, if they are interested in to begin.

1. Float was originally designed only for text surround typesetting.
2. Three features of floating are important.
   1. Out of the document flow.
   2. Float left/right until you encounter the parent element or another float element.
   3. Floating causes the parent element to collapse highly.
3. The way to resolve the height collapse of the parent element is to clear the float. The general method is clear float and BFC clear float. The recommended method is clearfix. Be sure to understand the underlying mechanism behind clear clearing floats and what those few lines of clearFix code do.
4. BFC has its own characteristics, and there are ways of triggering BFC, which I won’t expand too much here.
5. Ie6/7 does not support BFC and does not support BFC:after, so IE6/7 clears floats by triggeringhasLayout, understand the line, after all, IE6/7 has been a product of history.

The main purpose of writing these articles is to sort out the knowledge points, there is no fixed plan, where you want to write, if you want to know, you can leave a message, I will combine experience to sort out the knowledge, and tell you why to do so, how to do is the best practice.