【 introduction 】

Hello everyone, I am a sophomore student, currently learning front-end development, today I will talk about several methods I know to clear float. If there are insufficient places, welcome industry leaders in the comments area for correction.

[text]

So, before we talk about how to clean up floats, you should have a basic idea of what floats are. So the question is, what is floating? What is the point of its existence? Here’s a quote from HTML Chinese:

In CSS, floating is a way to move an element out of the flow of the document, moving it to the left or right and rearranging the elements around it.

In my opinion, the core of floating is breaking the flow of the document, and the purpose of using it is to allow text to wrap around the image in order to achieve the desired layout. So without further elaboration, let’s talk about several ways to clear up floats.

[Clear float]

Before we clear the float, we need to know why we want to clear the float, right? Take a look at this code:

<div class="topDiv"> <div class="floatDiv"> Float left </div> <div class="textDiv"> Waterproof performance has become one of the phone's many selling points. </div> <div class="bottomDiv">Copy the code

Normally, the floatDiv and textDiv boxes in the topDiv box would be arranged normally, but after we added the float: left attribute to the floatDiv box, this changed

Here we see that the overall layout changes after adding the float property to the floatDiv box, and we can see the impact

  1. This affects the overall layout of the page
  2. The height of the parent container topDiv is affected. Normal height of the parent element is self-adaptive, and the height is the total height of the content it contains, while the floating of the internal element causes the height of the parent container to collapse. (You can see that the height of our topDiv box has obviously collapsed here)
  3. The collapse of the parent container affects the layout of other elements at the same level as the parent element (for example, in the figure above, the red box is intermixed with the topDiv box and the bottomDiv box at the same level, which affects it

As a qualified front-end developer, we could not have submitted a page like this to party A in order to realize the function of typesetting text around pictures, right? So at this time we will use the following methods to clear floating, to clear the impact of floating on the whole.

【 method 】

① Use the clear attribute on adjacent elements of the same level down

A lot of people might say what does that mean? In this example, sibling adjacent elements refer to the textDiv box that adds the clear attribute to the sibling of the element with the float attribute

The premise is that the textDiv box is below floatDiv and does not work above it

② Insert clear floating “block-level elements” line elements before the parent element end tag does not work. The parent element tag here refers to the parent container of the float element, in this case a block-level element before the topDiv, and write the clear attribute to the CSS of the container

<div class="clearfix"> </div> CSS. Clearfix {clear:both; }Copy the code

③ Add a pseudo-element to the parent element. Make clear: both

In this case, the parent element is topDiv, which means you add a pseudo-element to it and write the clear attribute inside it

.topDiv::after{
            content:'.';
            display: block;
            height: 0;
            overflow: hidden;
            clear: both;
        }
Copy the code

(4) Set the parent container to BFC container, BFC container effect can be separated from the document flow of the height of the elements inside the parent container, to achieve the effect of clearing float

.topDiv
        {

             overflow: hidden; 

        }
        
Copy the code

One might look at this and say, what is a BFC container? To be honest, I always think of KFC when I see this…

What is BFC?

BFC, or Block Formatting Context (BFC), is a concept in W3 that determines how elements position their content. When the box is set up as a BFC container, it just happens to counteract the effects of the float, but that doesn’t mean that the BFC container is designed solely to counteract the effects of the float, just that it happens to do so. The BFC is a separate container on the page. When calculating the height of the BFC container, the height of the floating elements in the BFC container is also calculated, as shown in the following code

Body <div class="box"> <div class="left"></div> <div class="right"></div> </div> CSS part.left {background:green; border:3px solid #f31264; width: 200px; height: 200px; Opacity: 0.5; float:left; } .right { background: #ef5be2; Opacity: 0.5; border: 3px solid #f31264; width: 400px; min-height: 100px;Copy the code

This is the initial state, where only the float property is set for the left box and the screen looks like this

At this point, we can clearly see that the left box, the green part, has dropped out of the document flow, causing a high collapse of the parent container, which is the gray box. At this point we change the parent container into a BFC container

 <div class="box BFC">
 
Copy the code

The page looks like this

At this point, it can be seen that after setting the parent container box as BFC container, the impact of height collapse caused by floating has disappeared. Its height includes the height of floating elements, that is, it is propped up. As you can see, the BFC container can handle the impact of floating. So beyond that? Does it do anything else? That’s obviously true, because the BFC isn’t there to solve the float problem, it just happens to be. Another common use of the BFC container is to solve the margin overlap problem.

BFC solves margin overlap

We create a new HTML and put the code in

 .wrap
        {
            background: orange;
            width: 100%;
            height: 500px;
            
        }
        .container
        {
            height: 200px;
            background: green;
            
        }
        .box
        {
            height: 100px;
            background: pink;
          
        }
Copy the code

The page looks like this

Margin-top = 100px; margin-top = 100px; margin-top = 50px

But it’s not. Here’s what it looks like

This is a CSS bug that uses the largest margin in adjacent boxes. Setting the box as a BFC container solves this problem

     <div class="wrap BFC">
            <div class="container BFC">
                <div class="box BFC">
                
Copy the code

At this point, the page effect is the second image, which means that the BFC container has solved the margin overlap problem.

Note here that the BFC contains all the children of the created context element, but does not contain the inner elements of the child of the newly created BFC, that is, the mountain is high and the king is far away. For example, if A is A large container containing B and B contains C, we set A as BFC container, then B and C are controlled by A. However, if both A and B are set as BFC containers, C can only be controlled by B, but A cannot control B.

How do I set up the BFC container and what are the requirements?

  .BFC
        {
            overflow: hidden;
        }
Copy the code

What else can we put in here besides the hidden to achieve the same effect? Here’s a summary

Overflow: hidden; overflow: auto overflow: scroll overflow: overlay (Absolute, fixed) 3. Inline-block level 4. Table unit (display: table-cell) 5. Flex, inline-flexCopy the code

In addition to the above, there is another interesting method. For example, if BOX B is placed in A, and A does not set the height, then B sets the float property, then A will collapse in height. At this point we can also set A to float, leaving the document stream with B, and then A will be separated by B again, eliminating the effects of the float.

Above is the content that this time learns, have inadequacy place still hope big guy to instruct.