Float is a style that is often used in development and is often examined in interviews. Floating is an easy way to solve a lot of problems, but it can also lead to some undesirable situations. And with this article, my mother no longer has to worry about interviewers asking me floating questions.

Interviewer: Can you say something about the float, such as the impact of the float and how we should deal with it

Me :(this is a common question)

First, floating takes the current element out of the document flow, which affects the layout of the page. This can be resolved by clearing the float. At the same time, floating will cause the height collapse of the parent element, affecting the Dom layout at the same level as the parent element, which can trigger the BFC solution of the parent element.

Firstblood

Interviewer: You said that float is out of the document flow and position:absolute is out of the document flow. Are they the same?

Me :(ah this, see so time WDZ)

First of all, floating out of the document flow is part of undoffing, but not completely undoffing. Position :absolute is completely out of the document flow. This is the difference. Just as floating elements never overlap, they still affect the layout of the page even though they are out of the document flow.

And floating does not affect the text (because floating was created to allow text to surround the image), as the code below does with floating and positioning

<style>
  .div1{
    background-color: chartreuse;
    opacity: 0.5;
    /* float: left; * /
    position:absolute;
    width: 100px;
    height: 100px;
    line-height: 100px;
  }
  .div2{
    background-color:coral
  }
</style>
<body>
  <div class="div1">The floating element</div>
  <div class="div2">Guess if I'll be blocked. Guess. Guess</div>
</body>
Copy the code

Doublekill

Interviewer: How do you clear the float?

Me: Since floating out of the document can affect the subsequent Dom layout (related to browser rendering, such as the font portion of the image above), we can address the effects of floating elements by adding clear:both to the first element after the floating element. Or clean up floats with pseudo-elements:

  .div1::after {
    content:"";  /* Set the content to empty */
    height:0;     /* The height is 0*/
    line-height:0;   /* The row height is 0*/
    display:block;   /* Convert text to block-level elements */
    visibility:hidden;   /* Hide the element */
    clear:both;    /* Clear float */
  }
Copy the code

Interviewer: How do you solve the height collapse problem of the parent element

Me: We can use the above method to clear the float of the parent element, so as to solve the problem of the height of the parent element collapse. At the same time, we can also set overflow:hidden and other attributes for the parent element to trigger the BFC of the parent element, so as to solve the problem of height collapse of the parent element.

Interviewer: So you said BFC, can you tell me what BFC is

Me: THE BFC is called “block-level format context”, which means the box that triggers the BFC, and the elements inside the box do not affect the layout outside. We can trigger it with attributes like location, overflow, and display. In daily development, we can use BFC to solve floating height collapse, margin overlap and other problems