The advantages and disadvantages of floating layout, what are the ways to clear floating?

What is a floating layout:

When an element floats, it can move left or right until its outer edge touches the frame containing it or the border of another floating element.

After the element floats, it will depart from the normal document flow, so the frame in the normal flow of the document will appear as if the floating element does not exist.

Advantages of floating layout:

The advantage of this is that the text can be well wrapped around the picture when the picture is mixed. In addition, when the element floats, it has some properties of block-level elements such as width and height, but it is still different from inline-block. The first one is about horizontal sorting, float can set direction and inline The direction of -block is fixed; there is another problem that inline-block sometimes has a blank space when in use

Disadvantages of floating layout:

The most obvious disadvantage is that once the floating element leaves the document flow, it cannot support the parent element, which will cause the height of the parent element to collapse

Way to clear float

1. Add additional tags

<div class="parent">
    //添加额外标签并且添加clear属性
    <div style="clear:both"></div>
    //也可以加一个br标签
</div>

2. Add the overflow attribute to the parent or set the height

<div class="parent" style="overflow:hidden">//auto 也可以
    //将父元素的overflow设置为hidden
    <div class="f"></div>
</div>

3. Create a pseudo-type selector to clear floats (recommended)

//在css中添加:after伪元素
.parent:after{
    /* 设置添加子元素的内容是空 */
      content: '';  
      /* 设置添加子元素为块级元素 */
      display: block;
      /* 设置添加的子元素的高度0 */
      height: 0;
      /* 设置添加子元素看不见 */
      visibility: hidden;
      /* 设置clear：both */
      clear: both;
}
<div class="parent">
    <div class="f"></div>
</div>