Floating advantages:

It’s a great way to surround text with pictures when you mix them

When an element floats, it has some of the properties of a block-level element such as width and height, but there are a few differences from inline-block. For horizontal sorting, float can set the direction while inline-block is fixed. Another problem is that inline-blocks sometimes have white space when used

Floating disadvantages:

The most obvious disadvantage is that once the floating element is out of the document flow, it cannot hold up the parent element, causing the parent element to collapse in height.

Why does CSS clear float?

In many cases, it is inconvenient to give height to the parent box, but the child box floats and does not occupy the position, and finally when the height of the parent box is 0, it will affect the standard flow box below. Since the floating element no longer occupies the position of the original document flow, it will affect the layout of the following elements, namely:

① The parent level has no height.

② The sub box floats.

(3) Affect the layout below, we should clear the float.

Clear the nature of the float:

The essence of clearing a float is to clear the impact of floating elements leaving the standard flow

If the parent box itself has a height, there is no need to clear the float

After the float is cleared, the parent automatically detects the height based on the float’s subboxes. When the parent level has height, it does not affect the standard flow below

The policy for clearing a float is:

Closed float. Let float affect only the inside of the parent box, not the other boxes outside the parent box.

Method to clear the float

1. The additional labeling method, also known as the partition method, is recommended by W3C.

2. Add overflow attribute at parent level

3. The parent adds after pseudo-element

4. Add double pseudo-elements to the parent

Referring to the W3C example, the news container does not enclose floating elements.

.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>
Copy the code

Clear floating Method

Method 1: Use an empty element with a clear attribute

The extra tag method, also known as the partition method, is a W3C recommendation that requires the new empty tag to be a block-level element.

.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

.clear {
  clear: both;
  }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>
Copy the code

Pros: Simple, less code, good browser compatibility. Disadvantages: Need to add a lot of non-semantic HTML elements, code is not elegant, not easy to maintain later.

Method two: Use the OVERFLOW property of CSS

Add overflow:hidden to the floating element container (parent element); Or overflow: auto; You can clear the float, and in IE6 you also need to trigger hasLayout, such as setting the container width and height for the parent element or setting zoom:1. After adding the overflow attribute, the float element returns to the container layer, raising the height of the container to clean up the float.

.news {
  background-color: gray;
  border: solid 1px black;
  overflow: hidden;
  *zoom: 1;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>
Copy the code

Method three: add a float to the container of floating elements

Adding a float property to the container of floating elements can clear the internal float, but this will make the whole float and affect the layout. This is not recommended.

Method four: use adjacent element processing

Do nothing and add the clear attribute to the element after the floating element.

.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

.content{
  clear:both;
  }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="content">***</div>
</div>
Copy the code

Notice that div. Content has content.

Method 5: Use CSS’s: After pseudo-element

Combine: After pseudo-elements (note that this is not a pseudo-class, but pseudo-elements, which represent the nearest element after an element) and IEhack, which is perfectly compatible with all major browsers today. IEhack means to trigger hasLayout. Add a ClearFix class to the float element container, and then add an after pseudo-element to the class to clean the float by adding an invisible Block element to the end of the element.

.news { background-color: gray; border: solid 1px black; } .news img { float: left; } .news p { float: right; } .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }.clearfix {/* IE6, 7 proprietary */ /* trigger hasLayout */ zoom: 1; } <div class="news clearfix"> <img src="news-pic.jpg" /> <p>some text</p> </div>Copy the code

Advantages: no tags, simpler structure Disadvantages: take care of low version browser representative sites: Baidu, Taobao.com, netease, etc

Method six: double pseudo-element method:

Also to the parent element

  .clearfix:before, .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }
Copy the code

Advantages: code more concise disadvantages: take care of the low version of the browser on behalf of the website: Xiaomi, Tencent, etc