Introduction to the

When an element is floated, it can be moved left or right until its outer edge touches the frame containing it or the border of another floating element. Elements float out of the normal flow of the document, so the box in the normal flow of the document behaves as if the floating element did not exist.

advantages

The advantage of this is that

  • It’s a good way to wrap text around an image when mixing text and text.
  • And when the element floats, it has some of the properties of a block-level element like you can set the width,
  • But there are some differences from inline-block
    • The first one is when you sort horizontally,Float can set the direction and inline-block direction is fixed;
    • There’s another oneinline-blockThere are sometimes in useA gapThe problem of

disadvantages

The most obvious disadvantage is that the floating element cannot support the parent element once it is out of the document flow, causing the parent element to collapse very high.

The way to clear the float

Add extra labels

<div class="parent">// Add additional labels and add the clear attribute<div style="clear:both"></div>// You can also add a br tag</div>
Copy the code

The parent adds overflow properties, or sets the height

<div class="parent" style="overflow:hidden">//auto can also // set overflow of the parent element to hidden<div class="f"></div>
</div>
Copy the code

Create pseudo-class selector to clear float (recommended)

<style>Parent :after{/* Sets the content of the added child element to be empty */ content:' ';  
      /* Set add child element to block level element */
      display: block;
      /* Sets the height of the added child element to 0 */
      height: 0;
      /* Sets add child element invisible */
      visibility: hidden;
      /* Set clear: both */
      clear: both;
}
</style>
<div class="parent">
    <div class="f"></div>
</div>
Copy the code