float float: the advantages of float? Disadvantages? Several ways to clearly float?

float:

Introduction to Floating Layout: When an element floats, it can move to the left or right until its outer edge touches the frame that contains 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 document's normal flow will appear as if the floating element does not exist.

advantage:

1. When pictures and texts are mixed, the text can be well wrapped around the pictures.
2. When the element floats, it has some properties of block-level elements, such as width
and height, etc. 3. But there are some differences between it and inline-block

• The first one is about horizontal sorting, the float can set the direction and the inline-block direction is fixed;
• There is also a problem that inline-block sometimes has blank spaces when in use.

Disadvantage

The most obvious disadvantage is that once the floating element leaves the document flow, it cannot hold up the parent element, which will cause the parent element to collapse in height.

Clear float

• Add extra tags

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

• 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>

• Create a pseudo-class 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>

Reference: What
are the advantages of floating layout? What are the disadvantages? What are the ways to clear floats?